CSS outline属性允许我们在边框外的元素周围画一条线。
CSS具有以下轮廓属性：
1.Outline-style
2.Outline-color
3.Outline-width
4, Outline-offset
1.外形样式
outline-style属性告诉我们轮廓的样式或类型。
如果未设置轮廓样式, 则无法访问任何其他轮廓属性。
Outline-style的类型：
1.Dotted
2.Dashed
3.Solid
4.Double
5.Groove
6.Ridge
7, Inset
8, Outset
Syntax:
body
{
outline-style:style name;
}例子：
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
<h2>The outline-style Property</h2>
<p>lsbin</p>
<p class = "dotted">A dotted outline.</p>
<p class = "dashed">A dashed outline.</p>
<p class = "solid">A solid outline.</p>
<p class = "double">A double outline.</p>
<p class = "groove">A groove outline.</p>
<p class = "ridge">A ridge outline.</p>
<p class = "inset">A inset outline.</p>
<p class = "outset">A outset outline.</p>
</body>
</html>OUTPUT:2.轮廓颜色
轮廓颜色属性指定轮廓的颜色。
可以通过名称, RGB值或十六进制值设置颜色。
Syntax:
body
{
outline-style:style name;
outline-color:color name;
}范例1：
<!DOCTYPE html>
<html>
<head>
<style>
h3
{
border:solid blue 4px;
outline-style:solid;
outline-color:red;
}
</style>
</head>
<body>
<h1>lsbin</h1>
<h3>OUTLINE PROPERTIES</h3>
</body>
</html>OUTPUT:范例2：
<!DOCTYPE html>
<html>
<head>
<style>
h3
{
border:solid orange 4px;
outline-style:dashed;
outline-color:green;
}
</style>
</head>
<body>
<h1>lsbin</h1>
<h3>OUTLINE PROPERTIES</h3>
</body>
</html>OUTPUT:3.Outline-width
轮廓宽度属性用于设置轮廓的宽度。
轮廓的宽度可以通过以px, cm, pt等指定宽度的大小来设置, 也可以使用诸如thin, thick, medium之类的术语来设置。
Syntax:
body
{
outline-style:style name;
outline-width:size;
}范例1：
<!DOCTYPE html>
<html>
<head>
<style>
h3
{
border:solid blue 4px;
outline-style:solid;
outline-width:8px;
}
</style>
</head>
<body>
<h1>lsbin</h1>
<h3>OUTLINE PROPERTIES</h3>
</body>
</html>OUTPUT:范例2：
<!DOCTYPE html>
<html>
<head>
<style>
h3
{
border:solid red 4px;
outline-style:solid;
outline-width:3px;
}
</style>
</head>
<body>
<h1>lsbin</h1>
<h3>OUTLINE PROPERTIES</h3>
</body>
</html>OUTPUT:4.Outline-offset
轮廓线偏移量属性用于指定轮廓线和元素边框之间的空间。
Syntax:
body
{
outline-style:style name;
border-style:style name;
outline-offset:size;
}例子：
<!DOCTYPE html>
<html>
<head>
<style>
h3
{
border:solid blue 3px;
outline-style:solid;
outline-offset:7px;
}
</style>
</head>
<body>
<h1>lsbin</h1>
<h3>OUTLINE PROPERTIES</h3>
</body>
</html>OUTPUT:范例2：
<!DOCTYPE html>
<html>
<head>
<style>
h3
{
border:solid green 3px;
outline-style:solid;
outline-offset:14px;
}
</style>
</head>
<body>
<h1>lsbin</h1>
<h3>OUTLINE PROPERTIES</h3>
</body>
</html>OUTPUT:
