HTML 学习笔记 CSS(轮廓)

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

相关阅读:
集合的泛型
 Strom的集群停止以及启动
 Strom简介，以及安装，和官方案例测试
 089实战 Nginx的安装
 088实战项目技术框架
 087实战集群的规模
 086实战项目开发流程，以及什么是数据分析平台，再者为什么要做数据分析平台，数据来源，数据处理流程
 085 HBase的二级索引，以及phoenix的安装（需再做一次）
084 HBase的数据迁移（含HDFS的数据迁移）
083 HBase的完全分布式的搭建与部署，以及多master
原文地址：https://www.cnblogs.com/huanying2000/p/6185326.html