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. DirectX SDK (June 2010)安装错误S1023，解决方法

    转自:http://hi.baidu.com/rootcat/item/6730f15f85e2c1958c12ed81 DirectX SDK (June 2010)安装错误S1023,解决方法 导 ...

  2. 洗礼灵魂，修炼python（12）--python关键词，包

    关键词 1.什么是关键词: 就是系统已经定义好的一些关键词语法,可以直接使用,很明显的就是在IDE里这些关键词会高亮显示的就是 2.有哪些关键词: 前面我们一直在说关键词,内置函数,到底有哪些关键词对 ...

  3. python pip 使用时错误： Patal error in launcher:Unable to create process using '"'

    当前我的电脑配置是64位, 装有python2.7 和python 3.6 两个版本 在使用pip install mysqlclient 的时候,出现了  Patal error in launch ...

  4. python中urllib的整理

    本不想使用这个玩意,奈何看到很多地方使用,随手整理下 urllib模块提供的urlretrieve()函数,urlretrieve()方法直接将远程数据下载到本地 urlretrieve(url, f ...

  5. C#中的console类输入输出功能

    Console.WriteLine() 直接将括号内内容显示在控制台界面中(相当于C语言printf()吧) Console.ReadLine()获取控制台用户自己输入的内容(功能和C语言scanf( ...

  6. IntelliJ idea 如何打开左边项目展开栏

    vie->Tool Windows->Project Alt+1 转自:https://blog.csdn.net/bug_moving/article/details/53284434

  7. zk理解（转载自邬兴亮---www.cnblogs.com/wuxl360/p/5817471.html）

    一.分布式协调技术 在给大家介绍ZooKeeper之前先来给大家介绍一种技术——分布式协调技术.那么什么是分布式协调技术?那么我来告诉大家,其实分布式协调技术 主要用来解决分布式环境当中多个进程之间的 ...

  8. Java学习笔记--JDK动态代理

    1.JDK动态代理     JDK1.3之后,Java提供了动态代理的技术,允许开发者在运行期创建接口的代理实例.JDK的动态代理主要涉及到java.lang.reflect包中的两个类:Proxy和 ...

  9. C++添加热键和捕获组合键

    一.热键注册 步骤一:声明一个全局量int hotkeyId=1: 步骤二:窗体创建的时候注册: int result= RegisterHotKey(this->GetHWND(), hotk ...

  10. 【WebLogic】weblogic调优

    版权声明:本文为博主原创文章(原文:blog.csdn.net/clark_xu 徐长亮的专栏),未经博主同意不得转载. https://blog.csdn.net/u011538954/articl ...