CSS轮廓大全

CSS轮廓

轮廓线是围绕边界(border)外的元素绘制的线,以使元素“脱颖而出”。

CSS具有以下轮廓属性:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

轮廓样式

outline-style属性指定轮廓的样式,并且可以具有以下值之一:

  • dotted - 定义虚线轮廓
  • dashed - 定义虚线轮廓
  • solid - 定义实线轮廓
  • double - 定义双重轮廓
  • groove - 定义3D凹槽轮廓
  • ridge - 定义3D脊状轮廓
  • inset - 定义3D插图轮廓
  • outset - 定义3D开始轮廓
  • none - 没有定义轮廓
  • hidden - 定义隐藏的轮廓

以下示例显示了不同的outline-style值:
 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>教程(jc2182.com)</title>
    <style>
        p {outline-color:red;}

        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>outline-style属性</h2>

<p class="dotted">虚线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双重轮廓</p>
<p class="groove">凹槽轮廓。效果取决于轮廓颜色值。</p>
<p class="ridge">山脊轮廓。效果取决于轮廓颜色值。</p>
<p class="inset">内凹轮廓。效果取决于轮廓颜色值。</p>
<p class="outset">外凸轮廓。效果取决于轮廓颜色值。</p>

</body>
</html>

轮廓颜色

outline-color属性用于设置轮廓的颜色。颜色可以通过以下方式设置:

  • name - 指定颜色名称,如“red”
  • RGB - 指定RGB值,例如“rgb(255,0,0)”
  • 十六进制 - 指定十六进制值,如“#ff0000”
  • invert - 执行颜色反转(确保轮廓可见,无论颜色背景如何)

以下示例显示了具有不同颜色的一些不同轮廓。另请注意,这些元素在轮廓内部也有一个细黑色边框:
 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>蝴蝶教程(jc2182.com)</title>
    <style>
        p.ex1 {
            border: 1px solid black;
            outline-style: solid;
            outline-color: red;
        }

        p.ex2 {
            border: 1px solid black;
            outline-style: double;
            outline-color: green;
        }

        p.ex3 {
            border: 1px solid black;
            outline-style: outset;
            outline-color: yellow;
        }
    </style>
</head>
<body>

<h2>边框色属性</h2>

<p class="ex1">红色实线轮廓</p>
<p class="ex2">绿色双线轮廓</p>
<p class="ex3">黄色外突轮廓</p>

</body>
</html>

轮廓宽度

outline-width属性指定轮廓的宽度,并且可以具有以下值之一:

  • thin (通常为1px)
  • medium (通常为3px)
  • thick(通常为5px)
  • 特定尺寸(以px,pt,cm,em等为单位)

以下示例显示了一些具有不同宽度的轮廓:
 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>教程(jc2182.com)</title>
    <style>
        p.ex1 {
            border: 1px solid black;
            outline-style: solid;
            outline-color: red;
            outline-width: thin;
        }

        p.ex2 {
            border: 1px solid black;
            outline-style: solid;
            outline-color: red;
            outline-width: medium;
        }

        p.ex3 {
            border: 1px solid black;
            outline-style: solid;
            outline-color: red;
            outline-width: thick;
        }

        p.ex4 {
            border: 1px solid black;
            outline-style: solid;
            outline-color: red;
            outline-width: 4px;
        }</style>
</head>
<body>

<h2>outline-width 属性</h2>

<p class="ex1">一个 thin 轮廓</p>
<p class="ex2">一个 medium 轮廓</p>
<p class="ex3">一个 thick 轮廓</p>
<p class="ex4">一个 4px 轮廓</p>

</body>
</html>

所有CSS轮廓属性

属性描述
outline在一个声明中设置轮廓宽度、轮廓样式和轮廓颜色的简写属性
outline-color设置轮廓的颜色
outline-offset指定轮廓与元素的边或边框之间的间距
outline-style设置轮廓的样式
outline-width设置轮廓的宽度

更详细的轮廓文章
HTML样式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值