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

1.CSS3选择器

（1）CSS3属性选择器（了解）

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

 （2）CSS3伪类选择器（掌握）

:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素（可以写n,2n,2n-1等,n从0开始，表所有,）	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	指定只有选择每个p元素是其父级的最后一个子级。
:first-child	p:first-child	指定只有当<p>元素是其父级的第一个子级的样式

（3）CSS3伪元素选择器（掌握）

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

2.CSS3颜色

（1）十六进制颜色

        ＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。

（2） RGB颜色

        RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。

（3）RGBA颜色（常用来做遮罩层）

        RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。

        RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数

（4）HSL颜色

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

        色相是在色轮上的程度（从0到360），0（或360）是红色的，120是绿色的，240是蓝色的。饱和度是一个百分比值;  0％意味着灰色。100％的阴影是全彩。亮度也是一个百分点;   0％是黑色的，100％是白色的。

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

        }

（5）HSLA颜色

        指定HSLA颜色值：HSLA（色调，饱和度，亮度，α），α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

        p{
                background-color:hsla(120,65%,75%,0.3);   /*写成.3也可以*/

        }

3.CSS3 文本效果

（1）CSS3 文本阴影（阴影不占位置）

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

h1{
    text-shadow: 5px 5px 5px #FF0000;
}

（2）CSS3文本溢出

CSS3文本溢出属性指定应向用户如何显示溢出内容

p.test1 {

//文本不换行
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;

//多余的部分隐藏掉
    overflow: hidden;

//修剪文本。
    text-overflow: clip; 
}
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;

//显示省略号来代表被修剪的文本
    text-overflow: ellipsis; 
}

4.CSS3 边框

（1）CSS3 盒阴影

在div中添加box-shadow属性

div{
box-shadow: 10px 10px 5px #888888;

}

（2）CSS3 边界图片

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

div{

 border: 30px solid blue;
border-image:url(border.png) 30 30 round;}

（3）CSS3 实现三角形

#triangle-up {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;(透明的)

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

}

#triangle-down {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 100px solid red;

}

#triangle-left {

    width: 0;

    height: 0;

    border-top: 50px solid transparent;

    border-right: 100px solid red;

    border-bottom: 50px solid transparent;

}

#triangle-right {

    width: 0;

    height: 0;

    border-top: 50px solid transparent;

    border-left: 100px solid red;

    border-bottom: 50px solid transparent;

}

#triangle-topleft {

    width: 0;

    height: 0;

    border-top: 100px solid red;

    border-right: 100px solid transparent;

}

 #triangle-topright {

    width: 0;

    height: 0;

    border-top: 100px solid red;

    border-left: 100px solid transparent; 

}

 #triangle-bottomleft {

    width: 0;

    height: 0;

    border-bottom: 100px solid red;

    border-right: 100px solid transparent;

}

 #triangle-bottomright {

    width: 0;

    height: 0;

    border-bottom: 100px solid red;

    border-left: 100px solid transparent;

}

5.CSS3框大小

（1）CSS3 box-sizing 属性（重点掌握）

值	说明
content-box	这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的 宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	指定 box-sizing 属性的值，应该从父元素继承

（2）CSS3 调整尺寸（resize）

        div { 

                border:2px solid;

                padding:10px 40px;

                width:300px;

                resize:both;

                overflow:auto;

}

6.CSS3背景

（1）background-image属性

不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

#example1 { 

background-image: url(img_flwr.gif), url(paper.gif);

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

}

可以给不同的图片设置多个不同的属性

#example1 { 

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

}

（2）background-size 属性(指定背景图像的大小)

指定的大小是相对于父元素的宽度和高度的百分比的大小。

div { background:url(img_flwr.gif);

background-size:100% 100%;

 background-repeat:no-repeat;

}

（3）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;

}

（4）background-clip属性

CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

#example1 { 

border: 10px dotted black;

padding: 35px;

background: yellow; background-clip: content-box;

}