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

CSS3选择器

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"的元素

CSS3伪类选择器

是一个行内元素，需要转换成块:display:block   float:**  position:。

必须添加content,哪怕不设置内容，也需要content:””。

E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。

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

CSS3颜色

十六进制颜色

指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。

RGB颜色

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

RGBA颜色

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

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

p{
background-color:rgba(255,0,0,0.5);

}

HSL颜色

HSL代表色相，饱和度和亮度 - 使用色彩圆柱坐标表示。

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

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

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

}

HSLA颜色

HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。

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

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

}

CSS3 文本效果

您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：:

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

CSS3 边框

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

}

CSS3 实现三角形

#triangle-up {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

}

CSS3框大小

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

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

box-sizing: content-box|border-box|inherit: