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

1.CSS3概述

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

2.CSS3选择器

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

(3)、CSS3伪元素选择器

::first-letter    p::first-letter      选择每一个<P>元素的第一个字母或者第一个汉字
::first-line       p::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%);
}

(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;
}

(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的直线，和左边的斜线。

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

6.CSS3框大小
(1)、CSS3box-sizing属性

box-sizing属性允许你以某种方式定义某些元素，以适应指定区域。

border-box指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了padding和border。通过从已设
定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

(2)、CSS3box-sizing属性浏览器支持

紧跟在-webkit-,-ms-或-moz-,-o-前的数字为支持该前缀属性的第一个浏览
器版本号。

(3)、CSS3调整尺寸
CSS3中，resize属性指定一个元素是否应该由用户去调整大小。
这个div元素由用户调整大小。(在Firefox4+,Chrome,和Safari中)
div{
border:2pxsolid;
padding:10px40px;
width:300px;
resize:both;
overflow:auto;
}

7.CSS3按钮
(1)、基本按钮样式

可以通过button标签来设置按钮
CSS实例
.button{
background-color:#4CAF50;/*Green*/
border:none;
color:white;
padding:15px32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
}

(2)、按钮颜色
我们可以使用background-color属性来设置按钮颜色
.button1{background-color:#4CAF50;}/*Green*/
(3)、按钮大小
我们可以使用font-size属性来设置按钮大小
.button1{font-size:10px;}
(4)、圆角按钮
我们可以使用border-radius属性来设置圆角按钮
.button1{border-radius:2px;}

(5)、按钮边框颜色
我们可以使用border属性设置按钮边框颜色
.button1{
background-color:white;
color:black;
border:2pxsolid#4CAF50;/*Green*/
}

(6)、鼠标悬停按钮
我们可以使用:hover选择器来修改鼠标悬停在按钮上的样式。
提示:我们可以使用transition-duration属性来设置"hover"效果的速度:
.button{
-webkit-transition-duration:0.4s;/*Safari*/
transition-duration:0.4s;
}
.button:hover{
background-color:#4CAF50;/*Green*/
color:white;
}

(7)、按钮阴影
我们可以使用box-shadow属性来为按钮添加阴影
.button1{
box-shadow:08px16px0rgba(0,0,0,0.2),06px20px0rgba(0,0,0,0.19);
}
.button2:hover{
box-shadow:012px16px0rgba(0,0,0,0.24),017px50px0rgba(0,0,0,0.19);
}

        (8)、禁用按钮
我们可以使用opacity属性为按钮添加透明度(看起来类似"disabled"属性效
果)。
提示:我们可以添加cursor属性并设置为"not-allowed"来设置一个禁用的图
片:
.disabled{
opacity:0.6;
cursor:not-allowed;
}

(9)、按钮宽度
默认情况下，按钮的大小有按钮上的文本内容决定(根据文本内容匹配长度)。
我们可以使用width属性来设置按钮的宽度:
提示:如果要设置固定宽度可以使用像素(px)为单位，如果要设置响应式的按
钮可以设置为百分比。

.button1{width:250px;}

8.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;
}