新增选择器
一、属性选择器:
二、伪类选择器
三、UI伪类选择器
常用操作
1.boreder-radius : 为元素添加圆角边框
2.border-image : 为元素添加边框背景
3.box-shadow :
background-origin :用来定义背景图像的定位区域(背景图像是从content开始还是padding还是border开始)
background-clip : 用来定义背景图像的裁剪区域
background-size : 用来定义背景图像的大小
常用文本属性
text-shadow : 定义文本阴影或模糊效果
text-overflow : 用来定义省略文本的处理方式
word-wrap :
@font-face规则:
RGBA
HSLA:作用色调(H)、饱和度(S)和亮度(L)3个要素基础上增加了不透明度(A)参数。
2D变形
transform : 对一些元素实现一些变形功能。
实例:
div { transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
transform-origin :
动画设计
transition :
animations动画:
第一步:定义@keyframes规则
第二步:把@keyframes规则捆绑到具体需要的元素中 用animation+@keyframes 名字
@keyframes规则:@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。