一.颜色和透明度
HTML5 中 CSS 其他剩下几个常用的样式,包括颜色、透明度、盒子的阴影轮廓以及光标的样式。
颜色我们之前其实已经用的很多了,比如字体颜色、背景颜色、边框颜色。但除了背景颜色和边框颜色讲解过,字体颜色却没有系统的讲解过。设置字体颜色其实也成为文本块的前景色。
属性 | 值 | 说明 | CSS 版本 |
---|---|---|---|
color | 颜色值 | 设置文本前景色 | 1 |
p {
color: red;
}
解释:设置文本颜色。
CSS3 提供了一个属性 opacity,可以设置元素的透明度。
属性 | 值 | 说明 | CSS 版本 |
---|---|---|---|
opacity | 0 ~ 1 | 设置元素的透明度 | 3 |
p {
color: red;
opacity: 0.5;
}
解释:设置元素的透明度。
二.盒子阴影和轮廓
1.box-shadow
CSS3 提供了一个非常实用的效果样式,就是阴影效果。通过 box-shadow 属性来实现,
样式表如下:
属性 | 值 | 说明 | CSS 版本 |
---|---|---|---|
box-shadow | hoffset | 阴影的水平偏移量,是一个长度值,正值表示阴影向右偏移,负值表示阴影向左偏移。 | 3 |
~ | voffset | 阴影的垂直偏移量,是一个长度值,正值代表阴影位于元素盒子的下方,负值代表阴影位于元素盒子上方。 | 3 |
~ | blur | (可选)指定模糊值,是一个长度值,值越大盒子的边界越模糊。默认值为 0,边界清晰 | 3 |
~ | spread | (可选)指定阴影延伸半径,是一个长度值,正值代表阴影向盒子各个方向延伸扩大,负值代表阴影沿相反方向缩小 | 3 |
~ | color | (可选)设置阴影的颜色,如果省略,浏览器会自行选择一个颜色 | 3 |
~ | inset | (可选)将外部阴影设置为内部阴影。 | 3 |
div {
width: 200px;
height: 200px;
border: 10pxsolid silver;
box-shadow: 5px 4px 10px 2px gray;
}
解释:给元素盒子增加阴影效果。
box-shadow: 5px 4px 10px 2px gray inset;
解释:实现内部阴影。
2.outline
CSS3 还提供了轮廓样式,它和边框一样,只不过它可以在边框的外围再加一层。样式表如下:
属性 | 值 | 说明 | CSS 版本 |
---|---|---|---|
outline-color | 颜色 | 外围轮廓的颜色 | 3 |
outline-offset | 长度 | 轮廓距离元素边框边缘的偏移量 | 3 |
outline-style | 样式 | 轮廓样式,和 border-style 一致 | 3 |
ontline-witdh | 长度 | 轮廓宽度 | 3 |
outline | 简写 | <颜色><样式> <宽度> | 3 |
div {
width: 200px;
height: 200px;
border: 10pxsolid silver;
outline: 10px double red;
}
解释:在边框的外围再增加一圈轮廓。
三.光标样式
我们不但可以指定页面上的元素样式,就连光标的样式也可以指定。样式表如下:
属性 | 值 | 说明 | CSS 版本 |
---|---|---|---|
cursor | 光标样式 | auto,default,none,context-menu,help,pointer,progress,wait,cell,crosshair,text,vertical-text,alias,copy,move,no-drop,not-allowed,e-resize,n-resize,ne-resize,nw-resize,s-resize,se-resize,sw-resize,w-resize,ew-resize,ns-resize,nesw-resize,nwse-resize,col-resize,row-resize,all-scroll | 1 |
div {
cursor: move;
}
解释:设置当前元素的光标为移动光标。
附:css光标样式表:
值 | 描述 |
---|---|
url | 需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 |
default | 默认光标(通常是一个箭头) |
auto | 默认。浏览器设置的光标。 |
crosshair | 光标呈现为十字线。 |
pointer | 光标呈现为指示链接的指针(一只手) |
move | 此光标指示某对象可被移动。 |
e-resize | 此光标指示矩形框的边缘可被向右(东)移动。 |
ne-resize | 此光标指示矩形框的边缘可被向上及向右移动(北/东)。 |
nw-resize | 此光标指示矩形框的边缘可被向上及向左移动(北/西)。 |
n-resize | 此光标指示矩形框的边缘可被向上(北)移动。 |
se-resize | 此光标指示矩形框的边缘可被向下及向右移动(南/东)。 |
sw-resize | 此光标指示矩形框的边缘可被向下及向左移动(南/西)。 |
s-resize | 此光标指示矩形框的边缘可被向下移动(南)。 |
w-resize | 此光标指示矩形框的边缘可被向左移动(西)。 |
text | 此光标指示文本。 |
wait | 此光标指示程序正忙(通常是一只表或沙漏)。 |
help | 此光标指示可用的帮助(通常是一个问号或一个气球)。 |