CSS outline轮廓样式用法详细示例

2021年4月1日18:08:32 发表评论 829 次浏览

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:

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: