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-width:thin;
        }
        p.two{
            border:red solid thin;
            outline-style:dotted;
            outline-width: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>

轮廓（Outline） 实例的更多相关文章

  1. W3School-CSS 轮廓（Outline)实例

    CSS 轮廓(Outline)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内 ...

  2. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  3. 轮廓Outline|表格Table实例

    1.使用outline属性在元素周围画一条线. border:red solid thin; outline:#00ff00 dotted thick; outline-style:dotted|da ...

  4. 边框(Border) 和 轮廓(Outline) 属性

    border 复合属性.设置对象边框的特性. 标签定义及使用说明 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 默认值: not specified 继承: no Java ...

  5. 简单了解css3轮廓outline

    outline属性是用来设置一个或多个单独的轮廓属性的简写属性 , 例如 . 轮廓有下面几个属性: { outline-style: solid; outline-width: 10px; outli ...

  6. CSS 不规则的轮廓-outline

    大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...

  7. 【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

  9. CSS轮廓outline

    http://www.cnblogs.com/xiaohuochai/p/5277416.html

  10. Unity之2D Sprite Outline外轮廓效果

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Unity5.3.8f1 Unity提供了2D Object Sprite对象,但是没有提供外轮廓Outline效果的支持 ...

随机推荐

  1. 通过DbVisualizer 工具运行DB2存储过程实现INSERT语句主键自增造数

    1.需求简介 最近开发人员需要进行一批数据进行生产上SQL语句耗时过长问题的验证与优化.所以在性能测试库中批量建造数据,由于交易本身业务逻辑过于复杂以及需要各种授权,最后决定采用插表的方式完成. 2. ...

  2. JS代码段：返回yyyy-mm-dd hh:mm:ss

    最近做项目的时候正好用到,本着能抄就抄的心态去百度搜索现成的代码, 没想到抄下来的好几个都是错的,要么getMonth没有加1,要么10以下的数字前面没有加0, 我真是日了狗了,这次把写好的正确的直接 ...

  3. NPOI帮助类

    /// <summary> /// NPOI导出帮助类 /// </summary> public class NPOIHelper { /// <summary> ...

  4. SpringBoot整合Rabbitmq设置消息请求头

    String str = "{\"origin\":\"BBC\",\"origin_coupon_id\":51,\" ...

  5. rbac models

    class Permission(models.Model): """ 权限表 """ perm_name = models.CharFie ...

  6. Android 接收系统广播(动态和静态)

    1.标准广播:是一种完全异步执行的广播,在广播发出之后,所有的广播接收器几乎会在同一时刻接收到这条广播信息,它们之间没有先后顺序.效率高.无法被截断. 2.有序广播:是一种同步执行的广播,在广播发出后 ...

  7. ssh无法访问服务器报“ssh-dss”认证错误

    故障描述: 在windows下的ssh客户端直接报错,内容为: Unable to negotiate with legacyhost: no matching host key type found ...

  8. django —— MVT模型

    转载----

  9. tcpdump抓包具体分析

    Tcpdump抓包分析过程   一.TCP连接建立(三次握手) 过程 客户端A,服务器B,初始序号seq,确认号ack 初始状态:B处于监听状态,A处于打开状态 A -> B : seq = x ...

  10. python设计模式之单例

    """ 单例模式 1.第一种方法 修改__new__方法 2.第二种方法 python import 就是一个单例模式 把要单例的类封装到一个py文件中 "&q ...