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

1.CSS3概述
(1)、CSS3简介
如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强
或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和
便捷动画圆角阴影边框图片…
(2)、CSS3现状
1、浏览器支持程度差，需要添加私有前缀
-webkit-谷歌safari
-moz-火狐
-ms-IE
2、移动端支持优于PC端
3、不断改进中
4、应用相对广泛

2.CSS3选择器
CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准
度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容
(1)、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"的元素
]

(2)、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-childp:last-child指定只有选择每个p元素是其父级的最后一个子级。
:first-childp:first-child指定只有当<p>元素是其父级的第一个子级的样式

(3)、CSS3伪元素选择器
是一个行内元素，需要转换成块:display:blockfloat:**position:。
必须添加content,哪怕不设置内容，也需要content:””。
E:after、E:before在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、
E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用
来做兼容处理。
::first-letterp::first-letter选择每一个<P>元素的第一个字母或者第一个汉字
::first-linep::first-line选择每一个<P>元素的第一行
::beforep::before在每个<p>元素之前插入内容
::afterp::after在每个<p>元素之后插入内容
3.CSS3颜色
(1)、十六进制颜色
所有主要浏览器都支持十六进制颜色值。
指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿
色）和BB（蓝色）。所有值必须介于0和FF之间。
p{
background-color:#ff0000;
}

(2)、RGB颜色
RGB颜色值在所有主要浏览器都支持。
RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义
颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。
p{
background-color:rgb(255,0,0);
}

(3)、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);
}

(4)、HSL颜色
IE9,Firefox,Chrome,Safari,和Opera10+.支持HSL颜色值。
HSL代表色相，饱和度和亮度-使用色彩圆柱坐标表示。
HSL颜色值指定：HSL（色调，饱和度，明度）。
色相是在色轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，
240是蓝色的。饱和度是一个百分比值;0％意味着灰色。100％的阴影是全彩。亮
度也是一个百分点;0％是黑色的，100％是白色的。
p{
background-color:hsl(120,65%,75%);
}

HSL
(5)、HSLA颜色
HSLA颜色值被IE9,Firefox3+,Chrome,Safari,和Opera10+.支持.
HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸-指定对象的透明
度。
指定HSLA颜色值：HSLA（色调，饱和度，亮度，α），α是Alpha参数定义的
不透明度。Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参
数。
p{
background-color:hsla(120,65%,75%,0.3);
}

4.CSS3文本效果
(1)、CSS3文本阴影
您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：:
h1{
text-shadow:5px5px5px#FF0000;
}
演示示例：CSS3文本阴影
(2)、CSS3文本溢出
CSS3文本溢出属性指定应向用户如何显示溢出内容
p.test1{
//文本不换行
white-space:nowrap;
width:200px;
border:1pxsolid#000000;
//多余的部分隐藏掉
overflow:hidden;
//修剪文本。
text-overflow:clip;
}
p.test2{
white-space:nowrap;
width:200px;
border:1pxsolid#000000;
overflow:hidden;
//显示省略号来代表被修剪的文本
text-overflow:ellipsis;
}

5.CSS3边框
(1)、CSS3圆角
在div中添加圆角元素
div{
border:2pxsolid;
border-radius:25px;
}
(2)、CSS3盒阴影
在div中添加box-shadow属性
div{
box-shadow:10px10px5px#888888;
}
(3)、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*/
}
(4)、CSS3实现三角形
三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左
右）的设置为border-方向：长度solidred，这个画的就是底部的直线。其他边使用
border-方向：长度solidtransparent。（2）有两个横竖边（上下左右）的设置，若
斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜
边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

6.CSS3框大小
(1)、CSS3box-sizing属性
box-sizing属性允许你以某种方式定义某些元素，以适应指定区域。
例如，假如您需要并排放置两个带边框的框，可通过将box-sizing设置为
"border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放
入框中。
box-sizing:content-box|border-box|inherit:
值说明
content-box这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边
框布局和绘制指定宽度和高度除外
border-box指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了padding和border。通过从已设
定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit指定box-sizing属性的值，应该从父元素继承
(2)、CSS3box-sizing属性浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性谷歌IE火狐safri欧朋
box-sizing10.08.029.05.19.5
4.0-webkit--ms-2.0-moz-3.2-webkit--o-
紧跟在-webkit-,-ms-或-moz-,-o-前的数字为支持该前缀属性的第一个浏览
器版本号。

(3)、CSS3调整尺寸
CSS3中，resize属性指定一个元素是否应该由用户去调整大小。

CSS3背景
CSS3中包含几个新的背景属性，提供更大背景元素控制。
在本章您将了解以下背景属性：
background-image
background-size
background-origin
background-clip
(5)、background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
#example1{
background-image:url(img_flwr.gif),url(paper.gif);
background-position:rightbottom,lefttop;
background-repeat:no-repeat,repeat;
}
可以给不同的图片设置多个不同的属性
#example1{
background:url(img_flwr.gif)rightbottomno-repeat,url
(paper.gif)lefttoprepeat;
}

(6)、background-size属性
background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际
大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。
您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
div{background:url(img_flwr.gif);
background-size:100%100%;
background-repeat:no-repeat;
}
(7)、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;
}
(8)、background-clip属性
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
#example1{
border:10pxdottedblack;
padding:35px;
background:yellow;background-clip:content-box;
}