手册
目录
前言:
轮廓(outline)是一条绘制在元素边框外部的线条。
轮廓是绘制在元素周围的一条线,位于边框 之外,使元素能够“突出显示”。
CSS 提供以下轮廓属性:
outline-styleoutline-coloroutline-widthoutline-offsetoutline注意: 轮廓与边框不同!与边框不同的是,轮廓绘制在元素的边框之外,可能会与其他内容重叠。此外,轮廓不是元素尺寸的一部分;元素的总宽度和高度不会受到轮廓宽度的影响。
outline-style 属性用于设置轮廓的样式,可选值如下:
dotted - 定义点状轮廓dashed - 定义虚线轮廓solid - 定义实线轮廓double - 定义双线轮廓groove - 定义3D凹槽状轮廓ridge - 定义3D凸槽状轮廓inset - 定义3D内嵌阴影轮廓outset - 定义3D外凸阴影轮廓none - 不显示轮廓hidden - 定义隐藏的轮廓下面的示例展示了不同的 outline-style 值的效果:
展示不同轮廓样式的示例:
p.dotted {outline-style: dotted;}<br></br>
p.dashed {outline-style: dashed;}<br></br>p.solid {outline-style: solid;}<br></br>
p.double {outline-style: double;}<br></br>p.groove {outline-style: groove;}<br></br>
p.ridge {outline-style: ridge;}<br></br>p.inset {outline-style: inset;}<br></br>
p.outset {outline-style: outset;}
运行实例 » 点击 "运行实例" 按钮查看在线实例
结果:
一个点状轮廓。
一个虚线轮廓。
一个实线轮廓。
一个双线轮廓。
一个凹槽状轮廓。效果取决于 outline-color 的设置。
一个凸槽状轮廓。效果取决于 outline-color 的设置。
一个内嵌阴影轮廓。效果取决于 outline-color 的设置。
一个外凸阴影轮廓。效果取决于 outline-color 的设置。
注意: 除非设置了 outline-style 属性,否则其他轮廓属性(你将在下一章节中学习)都不会产生任何效果!
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.7万人学习
共29课时
62.2万人学习
共25课时
39.6万人学习
共43课时
71.5万人学习
共25课时
62.1万人学习
共22课时
23.2万人学习
共28课时
34.3万人学习
共89课时
126.3万人学习