css3新增的属性

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

eg： -webkit - color:red;

2、选择器：

1)属性选择器：

eg：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规定，”：“表示伪类，”：：“表示伪元素)

3、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用作背景颜色时，只会让背景透明，文字不透明，且子盒子不继承父盒子

关于隐藏盒子：

Ⅰ)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。

4、边框：

1)边框圆角：

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;

eg：

2)边框阴影：

box-shadow

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

(inset可以设置内阴影)

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

5、渐变(背景-属性)：

1)线性渐变：

指沿着某条直线朝一个方向产生渐变效果

linear-gradient()

语法：方向 起始色 终止色

// 从黄色渐变到绿色

方向：(默认是从上到下)

2)径向渐变：

从一个中心点开始沿着四周产生渐变 效果

radial-gradient()

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

效果图如下所示

eg：制作导航栏