1.    美化盒子

1.1.          美化文本

1.1.1.  字体大小【font-size】:

字符框的高度,可继承,默认值medium,16px。基准字号:浏览器设置的默认字体大小,通常为16px,可更改。

预设值

medium

中等字号

large

大字体

Smaller

小字号

数值

px【常用】

绝对字体大小

em【常用】

相对于父元素的字体大小,若没有父元素,则使用基准字号

%

原理同em,例如200%,相当于2em,50%,相当于.5em

rem

相对于基准字号

1.1.2.  加粗字体【font-weight】

将【font-weight】设置为【bold】,以加粗文字,该属性可继承,数值从100到900取整。

1.1.3.  倾斜字体【font-style】

将【font-style】设置为【italic】,以倾斜文字,该属性可继承。

1.1.4.  字间距【letter-spacing】

设置【letter-spacing】的值为px或em,可控制文字间的间隙,该属性可继承。

1.1.5.  首行缩进【text-indent】

可实现第一个文字向后缩进。

1.1.6.  给文字划线【text-decoration】

设置【text-decoration】属性,可以给文字划线。取值为underline,line-through,overline。

1.1.7.  修饰首字母【伪元素选择器  ::first-letter】

【::first-letter】可选中元素中的第一个文字

1.1.8.  修饰首行【伪元素选择器  ::first-line】

【::first-line】可选中元素中的第一行文字。

1.1.9.  修饰选中文字【伪元素选择器 ::selection】

【::selection】可选中被用户框选的文字。

1.1.10.          字体类型

概念:衬线字体和非衬线字体,修改字体类型【font-family】,使用【@font-face指令】加载web字体,使用图标字体。

1.2.          美化边框

圆角边框【border-radius】,普通的圆角边框,圆形边框,圆形图片。

1.3.          美化背景

1.3.1.  背景图

使用【background-image】设置背景图片。

使用【background-repeat】设置图片重复方式。

repeat

【默认值】从左到右从上到下重复

no-repeat

不重复

repeat-x

仅在x轴方向上重复

repeat-y

仅在y轴方向上重复

使用【background-position】设置图片在边框盒中的位置,默认值为左上。

预设值

left、right、top、bottom、center

数值

使用数值可实现从雪碧图(Sprite)中取得部分图像

示例:

使用【background-size】设置背景图尺寸。

预设值

contain,cover

数值

200px 200px;100% 100%,100% auto

使用【background-attachment】固定背景图

scroll

【默认值】背景图跟随元素移动

fixed

背景图固定

使用速写属性【background】统一设置:background:背景图 位置 / 尺寸 重复方式 固定方式 背景颜色

1.3.2.  背景渐变

线性渐变:【background-image:linear-gradient(...)】径向渐变(圆形渐变):【background-image:radial-gradient(...)】。

1.4.          透明度和鼠标样式

透明度【opacity】和alpha通道,鼠标样式。

可调整整个盒子的透明度,Opacity取值为0到1,0表示全透明,1表示完全不透明。使用rgba颜色,可调整某个颜色的透明度,rgba分别表示: r:red,g:green,b:blue,a:alpha,书写格式为:rgba(red, green, blue, alpha),其中,alpha表示透明通道,取值是0~1之间0表示全透明,1表示完全不透明,也可以用十六进制表示,例如rgba(0,0,0,0.5)可以写成#00000080

1.5.          阴影

文字阴影【text-shadow】,盒子阴影【box-shadow】。

text-shadow: 2px 2px 4px rgba(0,0,0,.5),

第1个参数:2px,表示阴影的位置向x轴方向(横坐标)的偏移量为2px

第2个参数:2px,表示阴影的位置向y轴方向(横坐标)的偏移量为2px

第3个参数:4px,表示阴影的模糊半径,该数值越大,阴影越模糊

第4个参数:rgba(0,0,0,.5),表示阴影的颜色

box-shadow: 4px 5px 6px rgba(0,0,0,.5)

box-shadow和text-shadow的用法非常类似

它的4个参数分别表示:x轴的偏移量、y轴的偏移量、模糊半径、阴影颜色

box-shadow: 4px 5px 6px 7px rgba(0,0,0,.5)

多了一个参数,最后一个7px表示阴影的扩散半径,该值越大,阴影越大

box-shadow: 0px 0px 6px 7px rgba(0,0,0,.5)

使用该方式可制作一个以盒子为中心的扩散阴影

box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,.5)

加入inset关键字,可将阴影的扩散方向由向外变为向内。

HTML之美化盒子的更多相关文章

  1. 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)

    推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...

  2. 点击盒子选中里面的单选框,并给盒子添加相应样式,美化单选框、复选框样式css用法,响应式滴

    pc效果图: 移动端效果图: 代码直接上: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  3. Jquery制作--美化下拉框

    平常我们用的原生select下拉框,大部分样式没办法修改,导致在不同的浏览器里面会跟设计图的风格大相径庭.所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式.原生的下拉框也保留在div ...

  4. CSS自学笔记(10):CSS3盒子模型

    CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...

  5. css美化页面

    css美化页面 如果在我们一行文字中,想让某个文字凸显出来,使用span! 1.字体样式 font-style:字体的风格 italic normal font-weight:字体的粗细 normal ...

  6. 使用css3美化复选框

    声明:文章为转载(略改动),点击查看原文.如有侵权24小时内删除,联系QQ:1522025433. 我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那 ...

  7. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  8. WEB入门.六 盒子模型

    学习内容 CSS盒子模型 盒子之间的关系 页面元素定位 能力目标 理解盒子模型 理解内容与表现分离的优点 理解并掌握盒子之间的关系 理解并掌握绝对定位与相对定位的用法 本章简介 上一章节中已经讲解了页 ...

  9. CSS美化自己的完美网页

    CSS美化自己的完美网页   CSS概述 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的h ...

随机推荐

  1. 让matlab在出错时停在debug内,并留下相关变量

    很多时候,我们写的matlab代码会在执行的过程中发生错误.这种情况下,matlab会 直接跳出执行,顺带告诉你是在代码的那一行跳出了,但是却无法留下出错时的每个变量 的具体值,给debug带来很大的 ...

  2. 更改mysql 数据库 utf8

    mysql> alter database 数据库名 character set utf8;

  3. vue 面试题(文章末尾还有其他链接)

    https://segmentfault.com/a/1190000016344599

  4. powerdesigner使用遇到的一些问题

    1.数据库逆向生成er图时,连接数据库问题 由于powerdesigner版本是32位,可能就导致不兼容64位的机器,导致连接mysql失败: 解决方法:方法1.重新配置32位jdk 方法2.mysq ...

  5. MongoDB的安装及配置(Win7)

    一.下载MongoDB 登录Mongodb官网https://www.mongodb.com/download-center#community 二.安装MongoDB 安装真的比较简单 next就可 ...

  6. 开题报告中如何将一段文字插入到word表格中

    1,举例如下,打开空白word,设计一个20列的表格.任意一段文字. 2,选中这段文字,点击替换按钮.查找内容为“?”,替换为“^&,”(后面是逗号),并勾选“使用通配符”. 3,全部替换得到 ...

  7. React Native面试题记录

    一.ES6中增加了那些新的功能? 1> for-of循环: 使用 for-of 的时候,循环的是数组内部的元素且不会出现 for-in 中将附加属性也遍历的情况,其次,循环变量的类型和其在数组中 ...

  8. vm overcommit参数

    overcommit参数需要根据不同服务来进行调整,使内存得到充分利用的同时保证系统的稳定性.比如redis服务器建议把vm.overcommit_memory设置为1. 1.vm.overcommi ...

  9. 架构模式: Saga

    架构模式: Saga 上下文 您已应用每服务数据库模式.每个服务都有自己的数据库.但是,某些业务事务跨越多个服务,因此您需要一种机制来确保服务之间的数据一致性.例如,假设您正在建立一个客户有信用额度的 ...

  10. 华三F100系列防火墙 、华为USG6300系列防火 GRE 隧道配置

    GRE概述: 通用路由封装(GRE: Generic Routing Encapsulation)是通用路由封装协议,可以对某些网络层协议的数据报进行封装,使这些被封装的数据报能够在IPV4网络中传输 ...