第七十六节 css颜色和透明度 盒子阴影和轮廓 光标样式

css颜色和透明度,盒子阴影和轮廓,光标样式

学习要点：

1.颜色和透明度

2.盒子阴影和轮廓

3.光标样式

一．颜色和透明度

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

color设置文本颜色

属性 值 说明CSS版本

color 颜色值设置文本前景色1

div > span{color: #1e1eff;}<div><span>这是一段文本</span></div>

opacity设置元素的透明度

属性 值 说明CSS版本

opacity 0 ~ 1设置元素的透明度 3

div > span{background-color: #ff2b1c;opacity: 0.5;}<div><span>这是一段文本</span></div>

二．盒子阴影和轮廓

box-shadow阴影效果

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

属性值 说明

box-shadow hoffset 阴影的水平偏移量，是一个长度值，

正值表示阴影向右偏移，负值表示阴影向左偏移。

voffset 阴影的垂直偏移量，是一个长度值，正值代表阴影位于元素盒子的下方，

负值代表阴影位于元素盒子 上方。

blur （可选）指定模糊值，是一个长度值，值越大盒子的边界越模糊。

默认值为0，边界清晰

spread（可选）指定阴影延伸半径，是一个长度值，

正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小

color （可选）设置阴影的颜色，如果省略，浏览器会自行选择一个颜色

inset （可选）将外部阴影设置为内部阴影

div{width: 200px;height: 200px;border: 10px solid #1dc01e;box-shadow: 5px 4px 10px 8px gray;}<div>这是一段文本</div>

实现内部阴影

box-shadow: 5px4px 10px 2px gray inset;

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 #1dc01e;outline: #c04725 solid 3px;}<div>这是一段文本</div>

三．光标样式

我们不但可以指定页面上的元素样式，就连光标的样式也可以指定。样式表如下：

cursor设置当前元素的光标

属性 值 说明 CSS版本

cursorauto,default,none,context-men光标样式1

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

div{width: 200px;height: 200px;border: 10px solid #1dc01e;cursor: pointer;}<div>这是一段文本</div>