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. weblogic系列漏洞整理 -- 4. weblogic XMLDecoder 反序列化漏洞(CVE-2017-10271、CVE-2017-3506)

    目录 四. weblogic XMLDecoder 反序列化漏洞(CVE-2017-10271) 0. 漏洞分析 1. 利用过程 2. 修复建议 一.weblogic安装 http://www.cnb ...

  2. C#使用Aforge调用摄像头拍照

    一. 新建一个Winform项目 二.使用Nuget添加引用 安装下图中红色框住的两个程序包 安装完后发现安装了如下图的程序包,这是因为上述两个程序包存在对其它程序包的依赖. 三.编写程序 1. 窗体 ...

  3. 利用PCA进行故障监测

    利用PCA进行故障监测,传统的统计指标有两种:Hotelling-T2和平方预测误差(Squared prediction error, SPE).T2统计量反映了每个主成分在变化趋势和幅值上偏离模型 ...

  4. 使用zip压缩文件夹方法

    最近使用MapGis对.MPJ工程文件文件裁剪后,要对裁剪后的图形文件.ML,.MT,.MP,.MPJ文件打包,在网上找到7zip,Zlib的库,虽然都有源码,但是Zlib库中的使用没找到文件压缩的函 ...

  5. Redhat 下 XAMPP 安装和部署 DVWA 教程

    XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包.这个软件包原来的名字是 LAMPP,但是为了避免误解,最新的几个版本就改名为 XAMPP 了.它可以在Windo ...

  6. 使用golang求出A-Z的所有子集

    参考链接:https://blog.csdn.net/K346K346/article/details/80436430 有一个集合由A-Z这26个字母组成,打印这个集合的所有子集,每个子集一行,写C ...

  7. [Tomcat]The JRE_HOME environment variable is not defined correctly

    在tomcat的bin目录下,双击startup.bat,闪一下,就没了,后来仔细看了一下黑屏闪的内容如下: the JRE_HOME environment variable is not defi ...

  8. Luogu P4705 玩游戏

    题目描述 Alice 和 Bob 又在玩游戏. 对于一次游戏,首先 Alice 获得一个长度为 ​ 的序列 ​,Bob 获得一个长度为 ​ 的序列 bb.之后他们各从自己的序列里随机取出一个数,分别设 ...

  9. C++整形转化成string类型---路径拼接在批处理程序中的应用

    上"酸菜" // show_dateset_image.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include ...

  10. Spark本地运行成功，集群运行空指针异。

    一个很久之前写的Spark作业,当时运行在local模式下.最近又开始处理这方面数据了,就打包提交集群,结果频频空指针.最开始以为是程序中有null调用了,经过排除发现是继承App导致集群运行时候无法 ...