学习要点：
1.颜色和透明度
2.盒子阴影和轮廓
3.光标样式
本章主要探讨 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: 10px solid 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: 10px solid silver;
outline: 10px double red;
}
解释：在边框的外围再增加一圈轮廓。
三．光标样式
我们不但可以指定页面上的元素样式，就连光标的样式也可以指定。样式表如下：
属性 值 说明 CSS 版本
cursor 光标样式
auto,default,none,context-men
u,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-res
ize,nwse-resize,col-resize,ro
w-resize,all-scroll
1
div {
cursor: move;
}
解释：设置当前元素的光标为移动光标。
最新评论