CSS3选择器
a字符串匹配属性选择器
E[属性^="val"]
E[属性¥="val"]
E[属性*="val"]
E[属性="val"]
b结构性伪类
E:nth-chid(n)
E:nth-last-chid(n)
E:first-chid(n)
E:last-chid(n)
E:only-child(n)
E:nth-last-child(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type
E:nth-last-of-type
E:empty
c.UI元素状态选择器
E:cheked
E:enabled
E:disabled
E:target
E::selection
E:not(s)否定伪类选择器
E~F
E+F
CSS背景
1.边框
box-shadow边框阴影
eg:box-shadow(5px 5px 5px 10px);
值:水平,垂直,模糊,延长
2.border-radius圆角边框
3.background-orgin定位
属性border-box padding-box content-box
4.backgroound-clip背景的绘制区域
属性border-box padding-box content-box
5.backgroound-size
属性length 指定图片的大小
percentage百分比指定图片大小
auto图片的实际大小
cover图片等比缩放,可能会超出
contain等比缩放 图片始终包含在内
6.backgroound-cattachment设置或标志图像是随对象内容滚动还是固定的。必须指定backgroound-image属性
属性:fixed scroll local
文本阴影text-shadow
文本溢出 text-oveflow:clip/ellipsis与oveflown套用
clip:当文本溢出时,直接将溢出内容减掉
ellipsis:当文本溢出时,溢出部分时显示省略标记
word-wrap连续文本换行
normal控制连续文本换行
break-word超出边界部分换行
white-space:noweap;一行显示,不换行
CSS3 2D/3D转换
2D转换:
a.transform设置对象转换方式
transition设置对象变换时的过渡
translate()移动
rotate()旋转
scale()缩放
skew()翻转
matrix()组合操作
b.animation
属性:animation-name动画
animation-duration持续时间
animation-timing-function过渡方式
ease-in-out/linear/ease/ease-out
animation-iteration-count循环次数:infinite无限循环
动画的方向: -webkit-animation-direction: alternate/normal