CSS3选择器、边框、背景、按钮

CSS3现状

1、浏览器支持程度差，需要添加私有前缀
-webkit-谷歌safari
-moz-火狐
-ms-IE
2、移动端支持优于PC端
3、不断改进中
4、应用相对广泛

CSS3属性选择器
[attribute]  [target]  选择所有带有target属性元素
[attribute=value]  [target=-blank]  选择所有使用target="-blank"的元素
[attribute~=value  ][title~=flower]  选择标题属性包含单词"flower"的所有元素
[attribute|=language]  [lang|=en]  选择lang属性以en-为开头的所有元素（注意有关个-）
[attribute^=value]  a[src^="https"]  选择每一个src属性的值以"https"开头的元素
[attribute$=value]  a[src$=".pdf"]  选择每一个src属性的值以".pdf"结尾的元素
[attribute*=value]  a[src*="runoob"]  选择每一个src属性的值包含子字符串"runoob"的元素

CSS3伪类选择器
:nth-child(n)  p:nth-child(2)  选择每个p元素是其父级的第二个子元素
:nth-last-child(n)  p:nth-last-child(2)  选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
:nth-of-type(n)  p:nth-of-type(2)   选择每个p元素是其父级的第二个p元素
:nth-last-of-type(n)  p:nth-last-of-type(2)  选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
:last-child  p:last-child  指定只有选择每个p元素是其父级的最后一个子级。
:first-child  p:first-child  指定只有当<p>元素是其父级的第一个子级的样式

CSS3伪元素选择器

::first-letter  p::first-letter  选择每一个<P>元素的第一个字母或者第一个汉字
::first-line  p::first-line  选择每一个<P>元素的第一行
::before  p::before  在每个<p>元素之前插入内容
::after  p::after  在每个<p>元素之后插入内容

十六进制颜色

p{
background-color:#ff0000;
}

RGBA颜色
RGBA颜色值被IE9,Firefox3+,Chrome,Safari,和Opera10+支持。
RGBA颜色值是RGB颜色值alpha通道的延伸-指定对象的透明度。
RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。Alpha参数是一个介于0.0
（完全透明）和1.0（完全不透明）之间的参数
p{
background-color:rgba(255,0,0,0.5);
}

HSL颜色

HSL颜色值指定：HSL（色调，饱和度，明度）。

p{
background-color:hsl(120,65%,75%);
}

HSLA颜色

p{
background-color:hsla(120,65%,75%,0.3);
}

文本阴影 text-shadow : 5px 5px 5px #FF0000;

盒子阴影 box-shadow : 5px 5px 5px #FF0000;

水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

CSS3边框

CSS3圆角
在div中添加圆角元素

div{
border:2px solid;
border-radius:25px;
}

CSS3边界图片
border-image属性允许你指定一个图片作为边框！用于创建上文边框的原始
图像，在div中使用图片创建边框:

div{
border:30pxsolidblue;
border-image:url(border.png)3030round;
-webkit-border-image:url(border.png)3030round;/*Safari5andolder
*/
-o-border-image:url(border.png)3030round;/*Opera*/
}

 CSS3实现三角形
三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左
右）的设置为border-方向：长度solidred，这个画的就是底部的直线。其他边使用
border-方向：长度solidtransparent。（2）有两个横竖边（上下左右）的设置，若
斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜
边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

#triangle-up{
width:0;
height:0;
border-left:50pxsolidtransparent;
border-right:50pxsolidtransparent;
border-bottom:100pxsolidred;
}

圆角按钮 .button5{border-radius:50%;}

按钮边框颜色:

.button1{
background-color:white;
color:black;
border:2pxsolid#4CAF50;/*Green*/
}

鼠标悬停按钮

.button{
-webkit-transition-duration:0.4s;/*Safari*/
transition-duration:0.4s;
}
.button:hover{
background-color:#4CAF50;/*Green*/
color:white;
}

CSS3背景

background-image 背景图片
background-size 背景大小
background-origin 背景位置
background-clip 背景裁剪

background-origin 背景位置

background-Origin属性指定了背景图像的位置区域。
content-box,padding-box,和border-box区域内可以放置背景图像。

div{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100%100%;background-origin:content-box;
}

 background-clip属性

#example1{
border:10pxdottedblack;
padding:35px;
background:yellow;background-clip:content-box;
}