CSS3选择器
CSS3属性选择器
[target] | 选择所有带有target属性元素 | 2 | ||
[target=-blank] | 选择所有使用target="-blank"的元素 | 2 | ||
|
| 2 | ||
[lang|=en] | 选择 lang 属性以 en- 为开头的所有元素(注意有关个-) | |||
[src^="https"] | 选择每一个src属性的值以"https"开头的元素 | 3 | ||
[src$=".pdf"] | 选择每一个src属性的值以".pdf"结尾的元素 | 3 | ||
[src*="runoob"] | 选择每一个src属性的值包含子字符串"runoob"的元素 |
CSS3伪类选择器
是一个行内元素,需要转换成块:display:block float:** position:。
必须添加content,哪怕不设置内容,也需要content:””。
E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待,这样做的目的是用来做兼容处理。
p::first-letter | 选择每一个<P>元素的第一个字母或者第一个汉字 | 1 | |
p::first-line | 选择每一个<P>元素的第一行 | 1 | |
2 | |||
p::before | 在每个<p>元素之前插入内容 | 2 | |
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: