学习要点：
1.颜色和透明度
2.盒子阴影和轮廓
3.光标样式
立即学习“前端免费学习笔记（深入）”；
主讲教师：李炎恢
立即学习“前端免费学习笔记（深入）”；
本章主要探讨 HTML5 中 CSS 其他剩下几个常用的样式，包括颜色、透明度、盒子的阴影轮廓以及光标的样式。
立即学习“前端免费学习笔记（深入）”；
一．颜色和透明度
颜色我们之前其实已经用的很多了，比如字体颜色、背景颜色、边框颜色。但除了背景颜色和边框颜色讲解过，字体颜色却没有系统的讲解过。设置字体颜色其实也成为文本块的前景色。
|
属性 |
值 |
说明 |
CSS 版本 |
|
color |
颜色值 |
设置文本前景色 |
1 |
<span style="color: #800000;">p </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> red</span>;
}解释：设置文本颜色。
立即学习“前端免费学习笔记（深入）”；
CSS3 提供了一个属性 opacity，可以设置元素的透明度。
|
属性 |
值 |
说明 |
CSS 版本 |
|
opacity |
0 ~ 1 |
设置元素的透明度 |
3 |
<span style="color: #800000;">p </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
opacity</span>:<span style="color: #0000ff;"> 0.5</span>;
}解释：设置元素的透明度。
立即学习“前端免费学习笔记（深入）”；
二．盒子阴影和轮廓
1.box-shadow
CSS3 提供了一个非常实用的效果样式，就是阴影效果。通过 box-shadow 属性来实现，样式表如下：
<span style="color: #800000;">div </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 10px solid silver</span>;<span style="color: #ff0000;">
box-shadow</span>:<span style="color: #0000ff;"> 5px 4px 10px 2px gray</span>;
}解释：给元素盒子增加阴影效果。
立即学习“前端免费学习笔记（深入）”；
<span style="color: #800000;">box-shadow: 5px 4px 10px 2px gray inset;</span>
解释：实现内部阴影。
立即学习“前端免费学习笔记（深入）”；
2.outline
CSS3 还提供了轮廓样式，它和边框一样，只不过它可以在边框的外围再加一层。样式表如下：
|
属性 |
值 |
说明 |
CSS 版本 |
|
outline-color |
颜色 |
外围轮廓的颜色 |
3 |
|
outline-offset |
长度 |
轮廓距离元素边框边缘的偏移量 |
3 |
|
outline-style |
样式 |
轮廓样式，和 border-style 一致 |
3 |
|
ontline-witdh |
长度 |
轮廓宽度 |
3 |
|
outline |
简写 |
|
3 |
<span style="color: #800000;">div </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 10px solid silver</span>;<span style="color: #ff0000;">
outline</span>:<span style="color: #0000ff;"> 10px double red</span>;
}解释：在边框的外围再增加一圈轮廓。
立即学习“前端免费学习笔记（深入）”；
三．光标样式
我们不但可以指定页面上的元素样式，就连光标的样式也可以指定。样式表如下：
|
属性 |
值 |
说明 |
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
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”； |
<span style="color: #800000;">div </span>{<span style="color: #ff0000;">
cursor</span>:<span style="color: #0000ff;"> move</span>;
}解释：设置当前元素的光标为移动光标。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
167
收藏
