1-6：CSS3新增的属性

不同的浏览器可能需要不同的前缀：

例如： -webkit - color:red;

选择器

1）属性选择器

例如：E[att$="val"]：选择具有att属性且属性值为以val结尾的字符串的E元素

// 将会命中1，3两个div，因为匹配到了class属性，且属性值以c结尾。

2）伪类选择器

（其元素必须与父元素匹配）

n遵循线性变化，n=0、1、2......

3）否定选择器

（ E：not( ) 选择除某个元素之外的所有元素）

// 给表单中除submit按钮之外的input元素添加1px的实线红色边框

4）伪元素选择器

• E::first-letter （文本中的第一个字母或字）  // 杂志常用的首字下沉效果
• E::first-line （文本第一行）
• E::selection （可改变选中文本的样式，如：字体、背景）
• E::before和E::after（在元素内部开始位置和结束为止创建一个元素，该元素为行内元素，且必须要结合conten属性使用）

after属性：如以下所示，可以在网页中向字后面加竖线，并且可以设置样式：

content: "" ; 双引号里面写需要添加的内容。加竖线时，不需要填内容。加内容时不需要position。

（css3规定，”：“表示伪类，”：：“表示伪元素）

 

CSS3新增属性

1）颜色：

• RGBA（）：A表示透明度，不会影响子元素的透明度，取值为0~1之间。
• HSLA（）：H S L A

色调，取值0~360 饱和度，0%~100% 亮度，0%~100% 透明度0~1

0/360表示红色，120表示绿色，240表示蓝色

关于css透明度opacity和RGBA：

• opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
• RGBA用作背景颜色时，只会让背景透明，文字不透明，且子盒子不继承父盒子

关于隐藏盒子visibility和display：

• visibility:hidden; 隐藏，原来位置会被保留
• display:none; 隐藏，原来位置不会被保留

2）文本：

text-indent:2em （首行缩进两个字，一个字16px=1em）

text-overflow （设置是否使用一个省略标记标识对象内文本的溢出）

实现溢出文本显示省略号的效果代码：

text-shadow （文本阴影）

语法：text-shadow:X-Offset Y-Offset blur color;

X表示阴影水平偏移距离，正值右偏。Y垂直偏移，正直下偏。

blur阴影的模糊程度，不需要模糊设置为0，单位px。

3）边框：

边框圆角：border-radius

（顺时针）

简写模式：

border-radius: 10px; 四个角的横纵轴半径都为10px；

border-radius: 10px 5px; 1和3横纵轴半径为10px，2和4横纵轴半径为5px；

border-radius: 10px 5px 8px; 表示1模纵轴半径都为10px，2和4横纵轴半径都为5px，3角的横纵轴半径都为8px；

border-radius: 10px 8px 6px 4px; 表示1横纵轴半径都为10px，表示2横纵轴半径都为8px，表示3横纵轴半径都为6px，表示4横纵轴半径都为4px；

例如：

边框阴影：box-shadow

与与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）

（inset可以设置内阴影）

TIPs：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感。

4）渐变（背景-属性）：

线性渐变：linear-gradient（） 指沿着某条直线朝一个方向产生渐变效果

语法：方向 起始色 终止色

// 从黄色渐变到绿色

方向：（默认是从上到下）

径向渐变：radial-gradient（） 从一个中心点开始沿着四周产生渐变 效果

默认渐变中心是center，渐变形状是ellipse（椭圆形），渐变的大小是farthest-corner（表示到最远的角落）

 

效果图如下所示

例如：制作导航栏