顿搜
飞过闲红千叶，夕岸在哪
类目归类
基础简介——CSS3前端攻略之一
08/23
一、选择器
1、属性选择器
1、[att* =val] //包含val
2、[att^ =val] //以val开头
3、[att$=val] //以val结尾
2、伪元素选择器
1、p:first-line
2、p:first-letter
3、li:before{content: ""}
4、li:after{content: ""}
3、结构性伪类选择器
1、:root{background-color:darkgrey} //将样式绑在页面的根元素中
2、div *:not(h1){color:red} //排除这个结构下面的子元素样式
3、:empty{background-color:blue} //当前元素中内容为空白时使用的样式
4、:target{background-color:green}//点击超链接，跳转到目标后生效
4、选择器
1、li:first-child{background-color:darkgrey} //第一个子元素
2、li:last-child{background-color:darkgrey} //最后一个子元素
3、li:nth-child(3){background-color:darkgrey} //指定序号的子元素
4、li:nth-last-child(3){background-color:darkgrey} //指定序号的子元素(逆向)
5、li:nth-child(odd){background-color:darkgrey} //给基数加效果
6、li:nth-child(even){background-color:darkgrey} //给偶数加效果
7、h2:nth-of-type(odd){background-color:darkgrey} //奇偶只针对同类标签
8、li:nth-child(4n+1){background-color:darkgrey}
9、li:only-child{background-color:darkgrey} //对于只有一个子元素的生效
10、div ~ p{background-color:darkgrey} //处在同一个父级元素中的兄弟元素（通用兄弟选择器）
二、盒子模型
1、inline无法设置宽度，block可以设置宽度，如果要对inline设置宽度，可用inline-block
2、inline-table //让table和其它元素在一行
3、list-item //将其变为列表 ，可用list-style-type设置列表类型
4、overflow | overflow-x | overflow-y : hiddle/scroll/auto/inherit/visible
5、white-space: nowrap //不允许换行
6、box-shdow //盒子阴影
7、box-sizing:border-box //当前的盒子宽高包含设置的边距(内外边距)； content-box//宽高不包含设置的边距； inherit
三、背景与边框
1、background-clip: context-box //只包含内容区域； border-box //包含边框和内边距 ；padding-box//只包含内边距不包含边框
2、background-origin: context-box //背景图片从内容区域开始绘制； border-box //从边框开始绘制 ；padding-box//从padding开始绘制
3、border-radius: 20px 30px 10px 50px //左上，右上，右下，左下
4、border-image:url() 50 50 50 60
四、文字和字体
1、text-shadow: 5px 5px 5px grey
2、@font-face{font-family:webForm;src:local(''),url('.......ttf')format("truetype")}
3、font-size-adjust
五、变形处理
1、transform:rotate(45deg)/scale(1.5)/skew(30deg,30deg) /translate(50px,50px) //旋转，缩放，倾斜，移动
2、transform-origin: top right; //指定变形的基准点
六、动画
1、transition:background-color 1s linear //通过将一个属性值在一定时间内过渡到另一个属性值
2、animation：mycolor 3s linear;
2、@keyframes mycolor{0%{}30%{}60%{}90%{}100%{}}
