HTML 学习笔记 CSS(轮廓)

最新推荐文章于 2021-07-17 12:09:44 发布

ddiv24492

最新推荐文章于 2021-07-17 12:09:44 发布

阅读量554

点赞数

原文链接：http://www.cnblogs.com/huanying2000/p/6185326.html

版权

轮廓(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边框属性

转载于:https://www.cnblogs.com/huanying2000/p/6185326.html

ddiv24492

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML 学习笔记 CSS(轮廓)

轮廓(outline)是绘制于元素周围的一条线位于边框边缘的外围可起到突出元素的作用CSS outline属性规定元素轮廓的样式颜色和宽度话不多说来几个例子看一看1:在元素周围画线<html> <head> <meta charset="UTF-8"> <title&...
复制链接

扫一扫