css3选择器，阴影，圆角边框和字体引入
Css3基础
层级选择器
例：
- .box li{}代表box下面所有的li(包括下一级和下下级...)
- 子代选择器.box>li{}代表box的下一级
- .box+li{}当前元素的后面第一个兄弟
- .box~li{}当前元素的后面所有的兄弟(同一盒子)
属性选择器[]
-
class\]只要是class选择器都会被选择
- 完全匹配:div[class=box1]
- 包含匹配 :div[class~=box1]{},含有box1就匹配 -input[name]{} input[type=Emil]{}
模糊匹配
- class^b:以这个开头的
- class$b:以这个结尾
- class*b包含某个字符
结构伪类选择器
第几个，偶数2n（even），奇数2n+1；2n-1（odd）
目标伪类选择器 div：target{}，点击之后有特定的样式
可应用于折叠样板
div{display:none}
div:target{dispaly:black}
UI元素状态伪类选择器
焦点，会匹配选择器input：focus{}
注 ：采用checked时应先去掉默认样式（input[type=checkbox{appearance:none;})
否定和动态伪类选择器
阴影
文本阴影
支持多个阴影效果，第一个为水平方向，第二个为竖直方向，默认向左，下移动
盒子阴影
圆角边框
border-radius
- px或百分比
- v1，四个角一样
- v1，v2，左上右下，左下右上一致
- v1，v2，v3，左上，左下右上，右下
- v1，v2，v3，v4，顺时针
- border-top-left-radius，上下在前，左右在后
- boeder-radius：30px/60px，水平/垂直，只支持boeder-radius
- 当boeder-radius设置成盒子一半时会形成一个圆（正方形盒子中）
字体引入
