CSS样式box-shadow与outline

2016年2月12日 16:00:44web前端已关闭评论302阅读模式

HTML5中CSS其他剩下几个常用的样式，包括颜色、透明度、盒子的阴影轮廓以及光标的样式。

一、颜色和透明度

颜色我们之前其实已经用的很多了，比如字体颜色、背景颜色、边框颜色。但除了背景颜色和边框颜色讲解过，字体颜色却没有系统的讲解过。设置字体颜色其实也成为文本块的前景色。

p {color: red;}

解释：设置文本颜色。

CSS3提供了一个属性opacity，可以设置元素的透明度。

p {color: red;opacity: 0.5;}

解释：设置元素的透明度。

二、盒子阴影和轮廓

1、box-shadow

属性	值	说明	CSS 版本
box-shadow	hoffset	阴影的水平偏移量，是一个长度值，正值表示阴影向右偏移，负值表示阴影向左偏移。	3
	voffset	阴影的垂直偏移量，是一个长度值，正值代表阴影位于元素盒子的下方，负值代表阴影位于元素盒子上方。	3
	blur	（可选）指定模糊值，是一个长度值，值越大盒子的边界越模糊。默认值为 0，边界清晰	3
	spread	（可选）指定阴影延伸半径，是一个长度值，正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小	3
	color	（可选）设置阴影的颜色，如果省略，浏览器会自行选择一个颜色	3
	inset	（可选）将外部阴影设置为内部阴影。	3

CSS3 提供了一个非常实用的效果样式，就是阴影效果。通过 box-shadow 属性来实现，样式表如下：

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 还提供了轮廓样式，它和边框一样，只不过它可以在边框的外围再加一层。样式表如下：

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;}

解释：设置当前元素的光标为移动光标。