[12]CSS 其他样式

最新推荐文章于 2022-07-28 14:08:44 发布

chudan0503

最新推荐文章于 2022-07-28 14:08:44 发布

阅读量74

点赞数

原文链接：https://my.oschina.net/jason26/blog/1623902

版权

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

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

属性	值	说明	CSS 版本
color	颜色值	设置文本前景色	1

p { color: red; }

解释：设置文本颜色。
CSS3 提供了一个属性 opacity，可以设置元素的透明度。

属性	值	说明	CSS 版本
opacity	0 ~ 1	设置元素的透明度	3

p { color: red; opacity: 0.5; }

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

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;
解释：实现内部阴影。

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	此光标指示可用的帮助（通常是一个问号或一个气球）。

转载于:https://my.oschina.net/jason26/blog/1623902

关注