CSS其他样式

maolai 1173次浏览 0个评论

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

一、颜色和透明度

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

属性 说明 CSS 版本
color 颜色值 设置文本前景色 1
opacity 0 ~ 1 设置元素的透明度 3

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

属性 说明 CSS 版本
outline-color 颜色 外围轮廓的颜色 3
outline-offset 长度 轮廓距离元素边框边缘的偏移量 3
outline-style 样式 轮廓样式,和 border-style 一致 3
ontline-witdh 长度 轮廓宽度 3
outline 简写 <颜色> <样式> <宽度> 3

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

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


本文由MAOLAI博客编辑整理发布,欢迎分享,转载请注明出处!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址