CSS3 是层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。
它带来了许多期待已久的新特性,例如 border-radius(圆角)、box-shadow(阴影)、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式,如 multi-columns 、 flexible box 与 grid layouts。
W3C 的 CSS Working Group(CSS 工作组) 作出了一项被称为 Beijing doctrine 的决定,将 CSS 划分为许多小组件,称之为模块。这些模块彼此独立,按照各自的进度来进行标准化。
新增css选择器
参见 css选择器
CSS3新增多个伪类选择器:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:last-child
:only-child
:nth-child(n)
:nth-last-child(n)
:root
:epmty
:target
:enabled
:disabled
:checked
:not(selector)
新增了后兄弟选择element1~element2
新增了属性选择[attribute^=value]
、[attribute$=value]
、[attribute*=value]
border-radius 圆角
border-radius
允许设置元素的外边框圆角,该属性是一个 简写属性,是为了将这四个属性 border-top-left-radius
、border-top-right-radius
、border-bottom-right-radius
和 border-bottom-left-radius
简写为一个属性。即使元素没有 border,圆角也可以用到 background 上面。
可以使用 <length> <percentage> 类型,<length> 定义圆形半径或椭圆的半长轴,半短轴。<percentage> 定义圆形半径或椭圆的半长轴,半短轴。水平半轴相对于盒模型的宽度;垂直半轴相对于盒模型的高度
columns 分列
columns
用来设置元素的列宽和列数。它是一个简写属性,可在单个方便的声明中设置 column-width
和 column-count
属性。可以通过 column-gap
设置列间距。可以通过 column-rule
设置列间隔样式,该属性是 column-rule-width
、 column-rule-style
、 column-rule-color
三个属性的简写。
新增布局 flexible-box grid
box-shadow 阴影 text-shadow 文字阴影
参见 阴影
gradients 渐变
参见 gradients
transform 变换 transition 过渡 animation 动画
参见 transform & transition & animation
text-overflow 文本溢出支持渐隐和文本
text-overflow
属性确定如何向用户发出未显示的溢出内容的形式,CSS4中可能会支持 fade(以及fade函数) 和 string 两种形式(workidng draft)