CSS3
是最新的CSS
标准,旨在扩展CSS2.1
。
通过border-radius
属性可以给任何元素制作圆角。
border-radius
: 所有四个边角border-*-*-radius
属性的缩写。border-top-left-radius
: 定义了左上角的弧度。border-top-right-radius
: 定义了右上角的弧度。border-bottom-right-radius
: 定义了右下角的弧度。border-bottom-left-radius
: 定义了左下角的弧度。box-shadow: h-shadow v-shadow blur spread color inset
h-shadow
: 必需,水平阴影的位置,允许负值。v-shadow
: 必需,垂直阴影的位置,允许负值。blur
: 可选,模糊距离。spread
: 可选,阴影的大小。color
: 可选,阴影的颜色。在CSS颜色值寻找颜色值的完整列表。inset
: 可选,从外层的阴影改变阴影内侧阴影。CSS3
中包含几个新的背景属性,提供更大背景元素控制。
background-image
: 规定背景图片路径。background-clip
: 规定背景的绘制区域。background-origin
: 规定背景图片的定位区域。background-size
: 规定背景图片的尺寸。CSS3
渐变可以在两个或多个指定的颜色之间显示平稳的过渡。
Linear Gradients
: 线性渐变,向下/向上/向左/向右/对角方向。Radial Gradients
: 径向渐变,由中心定义。CSS3
对文本进行了更多的支持。
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
: 允许对长的不可分割的单词进行分割并换行到下一行。CSS3
可以使用@font-face
规则加载所需字体。
font-family
: 必需,规定字体的名称。src
: 必需,定义字体文件的URL
。font-stretch
: 可选,定义如何拉伸字体,默认是normal
。font-style
: 可选,定义字体的样式,默认是normal
。font-weight
: 可选,定义字体的粗细,默认是normal
。unicode-range
: 可选,定义字体支持的UNICODE
字符范围,默认是U+0-10FFFF
。CSS3
转换可以对元素进行移动、缩放、转动、拉长或拉伸。
transform
: 适用于2D
或3D
转换的元素。transform-origin
: 允许更改转化元素位置。CSS3
可以使用3D
转换来对元素进行格式化。
transform
: 向元素应用2D
或3D
转换。transform-origin
: 允许你改变被转换元素的位置。transform-style
: 规定被嵌套元素如何在3D
空间中显示。perspective
: 规定3D
元素的透视效果。perspective-origin
: 规定3D
元素的底部位置。backface-visibility
: 定义元素在不面对屏幕时是否可见。CSS3
可以创建动画,它可以取代许多网页动画图像、Flash
动画和JavaScript
实现的效果。
@keyframes
: 规定动画。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
。CSS3
中可以使元素从一种样式转变到另一个的时候,无需使用Flash
动画或JavaScript
。
transition
: 简写属性,用于在一个属性中设置四个过渡属性。transition-property
: 规定应用过渡的CSS
属性的名称。transition-duration
: 定义过渡效果花费的时间,默认是 0。transition-timing-function
: 规定过渡效果的时间曲线,默认是ease
。transition-delay
: 规定过渡效果何时开始,默认是 0。通过指定display: flex
来标识一个弹性布局盒子,称为FLEX
容器,容器内部的盒子就成为FLEX
容器的成员,容器默认两根轴线,水平的主轴与垂直的交叉轴,主轴的开始位置叫做main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
,容器成员默认按照主轴排列。
通过指定display: grid;
指定容器使用Grid
布局,Grid
布局中采用网格布局的区域,称为容器,容器内部采用网格定位的子元素,称为成员。容器中水平区域称为行,垂直区域称为列,可以将其看作二位数组。划分网格的线就称为网格线,正常情况下n
行有n + 1
根水平网格线,m
列有m + 1
根垂直网格线。注意当容器设置为Grid
布局以后,容器子元素的float
、display: inline-block
、display: table-cell
、vertical-align
和column-*
等设置都将失效。
CSS3
可以将文本内容设计成像报纸一样的多列布局。
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
的简写。CSS3
中增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。
appearance
: 允许使一个元素的外观像一个标准的用户界面元素。box-sizing
: 允许以适应区域而用某种方式定义某些元素。icon
: 为创作者提供了将元素设置为图标等价物的能力。nav-down
: 指定在何处使用箭头向下导航键时进行导航。nav-index
: 指定一个元素的Tab
的顺序。nav-left
: 指定在何处使用左侧的箭头导航键进行导航。nav-right
: 指定在何处使用右侧的箭头导航键进行导航。nav-up
: 指定在何处使用箭头向上导航键时进行导航。outline-offset
: 外轮廓修饰并绘制超出边框的边缘。resize
: 指定一个元素是否是由用户调整大小。CSS3
的filter
属性可支持对于网页进行各种滤镜效果。
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
element1~element2
: 选择同级前面有element1
元素的全部element2
元素[attribute^=value]
: 选择attribute
属性中以value
开头的元素[attribute$=value]
: 选择attribute
属性中以value
结尾的元素[attribute*=value]
: 选择attribute
属性中包含value
字符串的元素div:first-child
: 选择属于其父元素的第一个子元素的每个div
元素div:last-child
: 选择属于其父元素最后一个子元素的每个div
元素div:nth-child(n)
: 选择属于其父元素的第n个子元素的每个div
元素div:nth-last-child(n)
: 同上,从这个元素的最后一个子元素开始算div:nth-of-type(n)
: 选择属于其父元素第n个div
元素的每个div
元素div:nth-last-of-type(n)
: 同上,但是从最后一个子元素开始计数div:first-of-type
: 选择属于其父元素的首个div
元素的每个div
元素div:last-of-type
: 选择属于其父元素的最后div
元素的每个div
元素div:only-child
: 选择属于其父元素的唯一子元素的每个div
元素div:only-of-type
: 选择属于其父元素唯一的div
元素的每个div
元素:root
: 选择文档的根元素:empty
: 选择的元素里面没有任何内容:checked
: 匹配被选中的input元素,这个input元素包括radio和checkbox:default
: 匹配默认选中的元素,例如:提交按钮总是表单的默认按钮:disabled
: 匹配禁用的表单元素:enabled
: 匹配没有设置disabled属性的表单元素:valid
: 匹配条件验证正确的表单元素可以针对不同的媒体类型设置不同的样式规则,可以根据视窗、设备高度与宽度、设备方向、分辨率等进行不同CSS
适配。