对于现在的网站来说，CSS3的运用已经很广泛了，或许在无意间或者顺手都运用到了CSS3的属性，但却不自知。在这里，就整理下常用的CSS3的新增属性。
属性选择器:
例如: [data-info] 匹配有这个属性的标签；
子级选择器:
1.通过节点排队
|
:first-child |
个子元素, IE7兼容 |
|
:last-child |
较后一个子元素 |
|
:nth-child(x) |
第x个子元素,从1开始数 |
|
:nth-last-child(x) |
倒数第x个子元素 |
|
:nth-child(xn-y) |
从第y个开始每x个选一个 |
2.通过类型排队
|
:first-of-type |
个元素 |
|
:last-of-type |
较后一个子元素 |
|
nth-of-type(x) |
第x个子元素,从1开始数 |
|
nth-last-of-type(x) |
倒数第x个子元素 |
|
nth-of-type(xn+y) |
从第y个开始每x个选一个 |
关系选择器:
>子级、+个同级、~所有同级, IE7兼容。
例如: div>p、div+p、div~p；
唯一选择器:
:only-child、:only-of-type 唯一类型元素。
空性选择器:
:empty 空元素。
否定选择器:
:not(.app) 没有app类名的元素。
伪类:
|
:checked |
被选中的表单元素 |
|
:enabled |
有效的表单元素 |
|
:disabled |
被禁用的表单元素 |
|
:focus |
得到焦点的元素 |
伪元素:
把"::"改成":" 兼容IE8
|
::before |
在子元素开头插入一个行内元素, 必须有属性content:""; |
|
::after |
在子元素开头插入一个行内元素, 必须有属性content:""; |
伪元素选择器:
|
::selection |
被选择的部分 |
|
:first-line |
首行 |
|
:first-letter |
个字符 |
css3新增颜色表示法:
| hsl(5%,100%,50%) | 三个数值分别表示: 色相、饱和度、亮度； |
| rgba(255,0,0,0.5) | 较后一个数值表示透明度 |
css3新增属性:
|
border-radius |
设置圆角, v: px | % |
|
box-shadow |
设置盒子阴影。例如: box-shadow: 1px 2px 3px 4px red;
v: @1 向右偏移量
@2 向下偏移量
@3 模糊半径
@4 延伸距离
@5 颜色
|
|
text-shadow |
设置文字阴影 |
| box-sizing: border-box | padding和border在盒子中内减 |
background新增:
| background-origin |
图片起源点 v:content-box 背景图片从内容部分平铺(除padding) |
| background-clip |
背景区域 v: content-box 背景区域设置成内容区域(除padding) |
| background-size |
图片尺寸 v: px |
| background-image | linear-gradient(180deg, red, blue);设置渐变 |
过渡：
| transition |
all 1s ease 0s； v: 1 设置参与过渡的属性, all表示所有属性参与过渡
2 过渡动画完成的时间
3 设置完成时间内的快慢顺序, 可以用ease(慢快慢)、linear(匀速)、贝塞尔曲线定义
4 延迟执行的事件
|
变形: 2D,3D效果
| transform |
变形 v:2D效果 rotate(30deg); 旋转变形, 30deg表示旋转30度 scale(2); 缩放变形, 2表示方法3至2倍 skew(10deg, 20deg); 斜切变形, 2个参数分别表示横向和纵向 3D效果 rotateX(10deg); 绕X轴空间旋转(横向) rotateY(10deg); 绕Y轴空间旋转(纵向) 空间移动 translateX(100px); 沿着图片的X轴向图片的左边移动(人的右手边) translateY(100px); 沿着图片的Y轴向下移动 translateZ(100px); 面向移动 translate(100px, 100px); X, Y连写 translate 3D(10px, 10px, 10px); X,Y,Z连写 |
微信
