边框-外轮廓-文本-渐变-WEB字体
1 回顾
1.1 基本语法
新增的长度单位: rem、vw、vh、vmax、vmin
新增的颜色设置方式: rgba()、hsl()、hsla()
1.2 选择器
1. 基本选择器
标签名
类名
ID名
全局
并集: div,p,h1 {}
交集: p.item {}
2. 层级选择器
后代元素选择器 空格
子元素选择器 >
选择紧邻在后面的一个兄弟元素 +
选择后面所有的兄弟元素 ~
3. 属性选择器
[attrName]
[attrName="value"]
[attrName^="value"]
[attrName$="value"]
[attrName*="value"]
[src][width="100"] {
}
4. 伪类选择器
4.1 动态伪类 :link :visited :hover :active :focus
4.2 目标伪类 :target
4.3 语言伪类 :lang()
4.4 UI元素伪类 :enabled :disabled :checked
4.5 结构伪类 :root :empty :first-child :last-child :nth-child(n) :nth-last-child(n) only-child :first-of-type :last-of-type :nth-of-type(n) :nth-last-of-type(n) :only-of-type
4.6 否定伪类 :not(选择器)
5. 伪元素选择器
::after ::before ::first-letter ::first-line ::placeholder ::selection
选择器权重:
ID > 类名、伪类、属性 > 标签名、伪元素 > 全局
1.3 新增盒子模型的CSS属性
box-sizing: content-box / border-box
box-shadow
opacity
1.4 新增背景的CSS属性
background-origin: padding-box、conent-box、border-box
background-clip: border-box, padding-box, content-box, text
background-size: 两个长度 / cover、contain
2 CSS3 新增边框属性
2.1 边框圆角
CSS 属性名 | 含义 | 值 |
---|---|---|
border-top-left-radius | 设置左上角圆角 | 设置长度,一个值表示正圆的半径;二个值分别是x半径和y半径 |
border-top-right | 设置右上角圆角 | 设置长度,一个值表示正圆的半径;二个值分别是x半径和y半径 |
border-bottom-left | 设置左下角圆角 | 设置长度,一个值表示正圆的半径;二个值分别是x半径和y半径 |
border-bottom-right | 设置右下角圆角 | 设置长度,一个值表示正圆的半径;二个值分别是x半径和y半径 |
border-radius | 复合属性 | 长度,同时设置多个角 |
border-raiuds 属性值的设置规则&#x