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. tkinter中frame布局控件

    frame控件 frame控件是将窗口分成好几个小模块,然后每个小模块中添加控件. 也就是将窗口合理的布局 由于和其他控件的操作基本一致,就不做注释了 import tkinter wuya = tk ...

  2. Ext.net 3.1学习

    主页面前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainF ...

  3. ORA-12538;ORA-12154；使用PL/SQL dve无法连接远程服务器上的oracle数据库，同时本机上也安装了一个oracle数据库

    问题描述:本人使用PL/SQL dve连接远程服务器上的oracle数据库,一直是没有问题的.我想提高下自己在数据库方面的能力就在自己的笔记本上安装了一个oracle数据库实例,安装并配置好之后,使用 ...

  4. [转]extern "C"的作用

    extern "C"的主要作用就是为了能够正确实现C++代码调用其它C语言代码. 加上extern “C”后,会指示编译器将这部分代码按C语言进行编译,而不是C++的.这是因为C+ ...

  5. 5.2Python函数（二）

    目录 目录 前言 (一)偏函数 ==1.说明== ==2.原代码== ==3.显示效果== (二)高阶函数 ==1.说明== ==2.源代码== ==3.运行效果== (三)返回值函数 ==1.说明= ...

  6. java.lang.RuntimeException: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.demoDao.getXXX;

    java.lang.RuntimeException: org.apache.ibatis.binding.BindingException: Invalid bound statement (not ...

  7. centos7升级内核版本

    本文转载http://blog.csdn.net/nciasd/article/details/51490146,大神非常厉害!!!!! 查看当前系统的内核版本 # uname -r 1.导入key ...

  8. linux 报错Mysql.pid 文件不存在导致service Mysqld start 失败

    Mysql.pid 文件不存在导致service Mysqld start 失败 1.  到提示报错的mysql.pid 不存在的目录下  使用 touch 命令创建mysql.pid文件.    t ...

  9. 20145203盖泽双 《网络对抗技术》实践1—— MAL_逆向与Bof基础

    20145203盖泽双 <网络对抗技术> MAL_逆向与Bof基础 实践目标 (1)我们要通过修改程序代码,使得程序运行其自身中本不该运行的代码片段. (2)在这里,我们有一个名为2014 ...

  10. mysql 日期操作 增减天数、时间转换、时间戳(转)

    转自http://www.cnblogs.com/wenzichiqingwa/archive/2013/03/05/2944485.html http://hi.baidu.com/juntao_l ...