CSS3样式一

一、新增选择器：

1. 属性选择器：

①　E[att~=”val”]：具有att属性且属性值为 用空格分隔的字词列表，其中一个等于val的E元素。

②　E[att^="val"]：以val开头的字符串。

③　E[att$="val"]：以val结尾的字符串。

④　E[att*="val"]：包含有val的所有字符串。

 

2. 伪类选择器：

①　:not()：不含有S选择符。

②　:root()：匹配在文档的根元素，根元素永远都是html元素。单指网页的根元素，有且只有一个html:root。

③　:nth-child(n)：匹配父元素的第n个子元素。

④　:nth-last-child(n)：倒数第n个子元素。

⑤　E:first-child()：父元素下的第一个子元素E。

⑥　E:first-of-type：第一个子元素E。

⑦　E:empty{}：没有任何子元素的元素E。

 

二、边框：

1. 阴影：box-shadow：参数：6个。

①　有3个参数：length，length，color，常规效果；

②　有4个参数：length，length，length,color，让阴影模糊，第三个length是模糊程度；

③　有5个参数。

④　至少要有2个参数：length，length。

 

2. 圆角边框：border-radius。

3. 图像边框：border-image：

①　border-image-slice：分割方式；

②　border-image-width：边框宽度；

③　border-image-repeat：平铺方式（streth：拉伸；repeat；round；space）

 

三、背景

1. background-size：设置背景图像的尺寸大小（auto：真实大小；cover：等比缩放完全覆盖；contain：等比缩放到宽度或高度与容器的宽高相等；也可写数字）

2. background-origin：定位（padding-box：从padding区域开始显示；border-box：从border开始显示；content-box：从内容开始显示。）

3. 多背景：在CSS样式里的background-image：url(),url(),.....

 

四、文本效果

1. 文本阴影：text-shadow；

2. 换行：word-wrap；

3. 文本溢出：text-overflow：clip/ellipsis。要先设置overflow：hidden，才起作用。这个属性要有特效必须有辅助属性：white-space：nowrap，内容不换行显示；overf：hidden，超出部分被隐藏。

4. 轮廓：text-outline，粗细，模糊半径，颜色（outline一样的。）