CSS3新增功能01

1. CSS3样式选择器

1.1 兄弟选择器

selector1~selector2:只能选择selector1后面的兄弟元素。

1.2 属性选择器

1.2.1 e[pro]:选择有pro属性的元素e。

1.2.2 e[pro=value]:选择有pro属性的,并且属性值是value的元素e。

1.2.3 e[pro^=value]:选择有pro属性的,并且属性值中以value开头的元素e。

1.2.4 e[pro$=value]:选择有pro属性的,并且属性值中以value结尾的元素e。

1.2.5 e[pro|=value]:选择有pro属性的,属性值使用“-”进行分割,并且第一个是 value的元素e。

1.2.6 e[pro*=value]:选择有pro属性的,并且属性值中有value字符的元素e。

1.3 伪类选择器(一个冒号)

1.3.1 E:nth-child(n):在E元素的兄弟元素中,选择第n个并且是E的元素。

注意:1、n从1开始算起;2、n可以是数字,也可以是各类算术公式;3、n也可以是odd,或者是even;4、如果第n个元素不是E元素的话,无法选中。

1.3.2 E:first-child:在E元素的所有兄弟元素中,选择第一个E元素。

1.3.3 E:last-child:在E元素的所有兄弟元素中,选择最后一个E元素。

1.3.4 E:not(selector):在E元素的所有兄弟元素中,选择除selector以外的元素。

1.3.5 E:target:可以实现页面内指定id锚点跳转,并且作为锚的目标元素可以单独设置样式。

2. CSS3伪元素(两个冒号)

2.1 e::before

2.1.1 可以为、且只能为双标签添加子元素。

2.1.2 默认为行内元素。

2.1.3 必须添加content属性,可以添加具体内容,也可以是空字符串,但是content中无法写其他元素。

2.1.4 根据具体要求改变它的形态,如块元素等。

2.2 e::after

同before使用方法一致。

2.3 e::selection

给被选中的内容设置样式,但是只能设置背景颜色、文字颜色和文字阴影。

2.4 e::placeholder

改变placeholder属性的内容的文字样式。

3. box-shadow边框阴影

3.1 参数介绍

3.1.1 参数1:设置阴影方向,默认为向外。可以设置为inset,阴影为向内。可选设置。

3.1.2 参数2:x方向的偏移量,可以为负值,必须设置。

3.1.3 参数3:y方向的偏移量,可以为负值,必须设置。

3.1.4 参数4:阴影的模糊程度(会在原阴影大小上做变化),不可为负值,可选设置。

3.1.5 参数5:扩充或缩小阴影的大小,可以为负值,可选设置。

3.1.6 参数6:设置阴影的颜色,默认为黑色。

3.2 使用方式

在需要设置多重阴影的时候可以直接通过“,”来分割。

4. text-shadow文字阴影

4.1 参数介绍

4.1.1 参数1:x方向的偏移量,可以为负值,必须设置。

4.1.2 参数2:y方向的偏移量,可以为负值,必须设置。

4.1.3 参数3:阴影的模糊程度(会在原阴影大小上做变化),不可为负值,可选设置。

4.1.4 参数4:设置阴影的颜色,默认为黑色。

4.2 使用方式

在需要设置多重阴影的时候可以直接通过“,”来分割。

5. 透明度的设置及注意

5.1 rgba()中通过对a值的设置来改变透明度

a的取值范围[0-1),这种方式设置的透明度不会被子元素继承。

5.2 hsla()中通过对a值的设置来改变透明度

a的取值范围[0-1),这种方式设置的透明度不会被子元素继承。

5.3 background-color:transparent

这种方式设置的透明度不会被子元素继承。

5.4 opacity

直接通过opacity或者alpha的方式设置会影响到子元素,透明度被子元素继承。

6. CSS3盒子模型

我们在以往给盒子设置宽高后会因为盒子的内边距或者边框的原因而影响到页面的整体布局,在CSS3中给出了元素盒子模型的概念。

box-sizing:设置盒子以一个指定的标准改变各尺寸。

content-box:默认值,保证盒子内容大小不变,向外扩充。当继续改变盒子的内边距或者边框大小时,会向外扩充,盒子整体的大小会变化。

border-box:保证盒子整体的大小不变,向内扩充。当继续改变盒子内边距或者边框大小时,盒子整体的大小不会变化,会想盒子内部进行扩充。

原文地址:https://www.cnblogs.com/chendu/p/5819872.html