前端-阶段01-HTML5&CSS3-Day13 | 昕昕-未来不是梦

type

status

date

slug

summary

1 CSS3 新增背景属性

旧标准已有的背景属性：

1.1 新增属性

① background-origin

该属性可以设置背景图像定位的原点，属性值如下：

② background-clip

该属性可以设置背景图像的显示区域，属性值如下：

③ background-size

该属性可以设置背景图像的尺寸，属性值设置规则如下：

1.2 background 复合属性

1.3 多背景图

如果位置重合，先写的背景图像会显示在上层！

2 CSS3 新增边框属性

2.1 边框圆角

CSS 属性名	含义	值
border-top-left-radius	左上角圆角	1~2个长度
border-top-right-radius	右上角圆角	1~2个长度
border-bottom-left-radius	左下角圆角	1~2个长度
border-bottom-right-radius	右下角圆角	1~2个长度
border-radius	多个角圆角	1~4个长度/1~4个长度

单个圆角属性值的设置规则：

复合属性的使用：

2.2 外轮廓

CSS 属性名	含义	值
outline-style	外轮廓风格	同border-style
outline-width	外轮廓宽度	长度
outline-color	外轮廓颜色	颜色
outline	复合属性	多个值使用空格分隔
outline-offset	与边框的距离不是 outline 的子属性	长度，可以是负值

外轮廓与边框的区别：

3 CSS3 新增文本属性

CSS 属性名	含义	值
text-align-last	最后一行文本水平对齐方式	start：靠文字起始方向对齐，默认自。 end：靠文字结束方向对齐。 left：靠左对齐。 right：靠右对齐。 center：居中对齐。 justify：两端对齐。
text-decoration-line	文本修饰线的类型	none：无。 underline：下划线。 overline：上划线。 line-throuth：删除线。
text-decoration-style	文本修饰线风格	solid：实线。 dashed：虚线。 dotted：点线。 double：双实线。 wavy：波浪线。
text-decoration-color	文本修饰线颜色	颜色
text-decoration	文本修饰线复合属性	多个值使用空格分隔
word-wrap / overflow-wrap	是否允许单词内部断行	normal：不允许。 break-wrod：允许。
white-space	文本显示格式	normal：默认值。 pre：原格式显示。 pre-wrap：pre基础上+自动换行。 pre-line：normal基础上+识别换行符。 nowrap：强制显示成一行
text-overflow	溢出文本显示省略号	clip：默认值。 ellipsis：显示省略号。
text-shadow	文本阴影	阴影偏移、模糊值、颜色

单行长文本显示省略号：

text-shadow 文本阴影的设置规则：

4 CSS3 渐变

渐变是一个值，要作为一个图片被使用，可以使用渐变作为值的属性有 background-image、list-style-image 等。

4.1 线性渐变

4.2 径向渐变（了解）

4.3 重复渐变

5 Filter 滤镜

滤镜函数	描述
blur()	设置模糊，值是长度，值越大越模糊，百分比无效。
brightness()	设置亮度，值是数字或者百分比，0全黑，1无效果，可以比1大，默认1。
saturate()	设置饱和度，值是数字或者百分比，0完全不包含，1无效果，可以比1大，默认1。
contrast()	设置对比度，值是0~1之间的数字或者百分比，0全灰，1无效果，可以比1大，默认1。
grayscale()	设置灰度，使用0~1之间的数字或百分比，值越大灰度越高，0无效果，1灰度最高，默认0
sepia()	设置深褐色度，使用0~1之间的数字或百分比，值越大深褐色度越高，0无效果，1灰度最高，默认0
hue-rotate()	设置色相旋转，值是0~360deg之间的角度
invert()	设置反转，使用0~1之间的数字或百分比，0无效果，1彻底反转，默认0
opacity()	设置不透明度，使用0~1之间的数字或百分比，0完全不透明，1彻底透明，默认0
drop-shadow()	设置阴影，需要设置偏移位置、模糊值、颜色
url()	使用svg设置滤镜

6 WEB 字体

6.1 web 字体基本语法

字体格式的转换工具：

https://www.fontsquirrel.com/tools/webfont-generator FontSquirrel在线工具

https://www.fontke.com/tool/fontface/ 字客网

字体定制工具：

https://www.iconfont.cn/webfont?spm=a313x.7781068.0.d81ec59f2#!/webfont/index 阿里Web字体

http://www.youziku.com/ 字体库网站

https://www.ziti163.com/webfont/create.aspx 字体网

6.2 字体图标