首页 > 代码库 > HTML 学习笔记 CSS(轮廓)

HTML 学习笔记 CSS(轮廓)

2024-08-27 09:46:15   240人阅读

轮廓(outline)是绘制于元素周围的一条线 位于边框边缘的外围 可起到突出元素的作用

CSS outline属性规定元素轮廓的样式 颜色和宽度

话不多说 来几个例子 看一看

1:在元素周围画线

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p {
                border: red solid thin;
                outline: #00ff00 dotted thick
            }
        </style>
    </head>
    <body>
        <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性</p>
    </body>
</html>

2:设置轮廓的颜色

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p {
                border: red solid thin;
                outline: #00ff00 dotted thick;
                outline-color: blue;
            }
        </style>
    </head>
    <body>
        <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性</p>
    </body>
</html>

3:设置轮廓的样式

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p {
                border: red solid thin;
                outline: #00ff00 dotted thick;
                outline-color: blue;
            }
            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>
        <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">An inset outline</p>
        <p class="outset">An outset outline</p>
        <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性</p>
    </body>
</html>

4:设置轮廓的宽度

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p {
                border: red solid thin;
                outline: #00ff00 dotted thick;
                outline-color: blue;
            }
            p.pOne {
                border: red solid thin;
                outline-style: solid;
                outline-width: medium;
            }
            p.pTwo{
                border:red solid thin;
                outline-style:dotted;
                outline-width:3px;
            }
        </style>
    </head>
    <body>
        <p class="pOne">A dotted outline</p>
        <p class="pTwo">A dashed outline</p>
        
        <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性</p>
    </body>
</html>

CSS边框属性

技术分享

 

HTML 学习笔记 CSS(轮廓)


联系
我们