CSS3-边框-外轮廓-文本-渐变-WEB字体

边框-外轮廓-文本-渐变-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