zoukankan      html  css  js  c++  java
  • 轮廓(Outline) 实例

    1.在元素周围画线
    本例演示使用outline属性在元素周围画一条线。

    <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>

    2.设置轮廓的颜色
    本例演示如何设置轮廓的颜色。
    <style type="text/css">
    p{border:red solid thin;outline-style:dotted;outline-color:#00ff00}
    </style>
    </head>
    <body>
    <p><b>注释</b> 只有在规定了 !DOCTYPE时,Inter explorer 8 (以及更高版本) 才支持 outline-color属性。</p>
    </body>

    3.设置轮廓的样式
    本例演示如何设置轮廓的样式。
    <style type="text/css">
    p{border:red solid thin}
    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</p>
    <p class="dashed"> A dasehd</p>
    <p class="solid">A solid</p>
    <p class="double">A double</p>
    <p class="groove">A groove</p>
    <p class="ridge">A ridge</p>
    <p class="inset">A inset</p>
    <p class="outset">A outset</p>
    </body>

    4.设置轮廓的宽度
    本例演示如何设置轮廓的宽度。
    <style type="text/css">
    p.one{
    border: red solid thin;
    outline-style:solid;
    outline-thin;
    }
    p.two{
    border:red solid thin;
    outline-style:dotted;
    outline-3px;
    }
    </style>
    </head>
    <body>
    <p class="one">This is some text in a paragraph.</p>
    <p class="two">This is some text in a paragraph.</p>

    </body>
  • 相关阅读:
    Linux 自定义快捷命令
    Linux 用户登陆提示This account is currently not available
    Linux 切换用户提示Permission denied
    Netty核心组件之ChannelPipeline
    Netty核心组件之ChannelHandler
    Netty核心组件之Channel
    Netty核心组件之ChannlFuture
    Error creating bean with name 'eurekaAutoServiceRegistration'
    关于mysql数据库时间与java后台时间类型
    rabbitMQ-helloWorld
  • 原文地址:https://www.cnblogs.com/zoulixiang/p/9982808.html
Copyright © 2011-2022 走看看