CSS 轮廓简写 详解
css3基础 2022-05-23 12:02:56小码哥的IT人生shichen
CSS 轮廓简写
CSS Outline - 简写属性
outline 属性是用于设置以下各个轮廓属性的简写属性：
outline-widthoutline-style（必需）outline-color
从上面的列表中，outline 属性可指定一个、两个或三个值。值的顺序无关紧要。
下例展示了用简写的 outline 属性指定的一些轮廓：
虚线轮廓。
红色的虚线轮廓。
5 像素的黄色实线轮廓。
粗的粉色凸槽轮廓。
示例代码：
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>
<h1>outline 属性</h1>
<p class="ex1">点状轮廓。</p>
<p class="ex2">红色的点状轮廓。</p>
<p class="ex3">5 像素的黄色实线轮廓。</p>
<p class="ex4">粗的粉色凸脊轮廓。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
