本文最后更新于2020年6月3日,已超过 3 个月没更新!

CSS3新特性汇总

边框

border-image    /*设置所有边框图像的速记属性*/
border-radius   /*圆角边框*/
box-shadow      /*添加阴影*/

圆角

border-radius               /*所有四个边角 border-*-*-radius 属性的缩写*/
border-top-left-radius      /*定义了左上角的弧度*/
border-top-right-radius     /*定义了右上角的弧度*/
border-bottom-right-radius  /*定义了右下角的弧度*/
border-bottom-left-radius   /*定义了左下角的弧度*/

背景

background-clip     /*规定背景的绘制区域*/
background-origin   /*规定背景图片的定位区域*/
background-size     /*规定背景图片的尺寸*/

文字效果

hanging-punctuation /*规定标点字符是否位于线框之外*/
punctuation-trim    /*规定是否对标点字符进行修剪*/
text-align-last     /*设置如何对齐最后一行或紧挨着强制换行符之前的行*/
text-emphasis       /*向元素的文本应用重点标记以及重点标记的前景色*/
text-justify        /*规定当 text-align 设置为 "justify" 时所使用的对齐方法*/
text-outline        /*规定文本的轮廓*/
text-overflow       /*规定当文本溢出包含元素时发生的事情*/
text-shadow         /*向文本添加阴影*/
text-wrap           /*规定文本的换行规则*/
word-break          /*规定非中日韩文本的换行规则*/
word-wrap           /*允许对长的不可分割的单词进行分割并换行到下一行*/

字体

font-family     /*必需 规定字体的名称*/
font-stretch    /*定义如何拉伸字体 默认是 "normal"*/
font-style      /*定义字体的样式 同上*/
font-weight     /*定义字体的粗细 同上*/
unicode-range   /*定义字体支持的UNICODE字符范围 默认是 "U+0-10FFFF"*/

过渡属性

transition                  /*简写属性,用于在一个属性中设置四个过渡属性*/
transition-property         /*规定应用过渡的 CSS 属性的名称*/
transition-duration         /*定义过渡效果花费的时间。默认是 0*/
transition-timing-function  /*规定过渡效果的时间曲线。默认是 "ease"*/
transition-delay            /*规定过渡效果何时开始。默认是0*/

动画属性

animation                   /*所有动画属性的简写属性,除了 animation-play-state 属性*/
animation-name              /*规定 @keyframes 动画的名称*/
animation-duration          /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
animation-timing-function   /*规定动画的速度曲线。默认是 "ease"*/
animation-fill-mode         /*规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式*/
animation-delay             /*规定动画何时开始。默认是 0*/
animation-iteration-count   /*规定动画被播放的次数。默认是 1*/
animation-direction         /*规定动画是否在下一周期逆向地播放。默认是 "normal"*/
animation-play-state        /*规定动画是否正在运行或暂停。默认是 "running"*/

多列属性

column-count        /*指定元素应该被分割的列数*/
column-fill         /*指定如何填充列*/
column-gap          /*指定列与列之间的间隙*/
column-rule         /*所有 column-rule-* 属性的简写*/
column-rule-color   /*指定两列间边框的颜色*/
column-rule-style   /*指定两列间边框的样式*/
column-rule-width   /*指定两列间边框的厚度*/
column-span         /*指定元素要跨越多少列*/
column-width        /*指定列的宽度*/
columns             /*设置 column-width 和 column-count 的简写*/

用户界面特性

appearance      /*允许您使一个元素的外观像一个标准的用户界面元素*/
box-sizing      /*允许你以适应区域而用某种方式定义某些元素*/
icon            /*为创作者提供了将元素设置为图标等价物的能力*/
nav-down        /*指定在何处使用箭头向下导航键时进行导航*/
nav-index       /*指定一个元素的Tab的顺序*/
nav-left        /*指定在何处使用左侧的箭头导航键进行导航*/
nav-right       /*指定在何处使用右侧的箭头导航键进行导航*/
nav-up          /*指定在何处使用箭头向上导航键时进行导航*/
outline-offset  /*外轮廓修饰并绘制超出边框的边缘*/
resize          /*指定一个元素是否是由用户调整大小*/

Try and fail, but don't fail to try.