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. .Net Core 2.0 生态（1）.NET Standard 2.0 特性介绍和使用指南

    .NET Standard 2.0 发布日期:2017年8月14日 公告原文地址 前言 早上起来.NET社区沸腾了,期待已久的.NET Core 2.0终于发布!根据个人经验,微软的产品一般在2.0时 ...

  2. [20170703]从备份集取出spfile转化为pfile.txt

    [20170703]从备份集取出spfile转化为pfile.txt --//上个星期的事情,要从备份集里面取出看看spfile文件某个参数当时的情况,结果尝试命令老是出错,做一个记录.--//最后选 ...

  3. js实现页面锚点定位动画滚动

    项目上需要的效果,个人不想用jquery实现,想着用js自己试试,花了点儿时间,终于实现.. 上干货.. function scrollTo(y, duration) { /*y:目标纵坐标,dura ...

  4. Apha冲刺！ Day2 - 砍柴

    Alpha冲刺! Day2 - 砍柴 今日已完成 晨瑶:没做和主项目相关的事情,除了教队友用gitkraken. 昭锡:学习LitePal对数据库进行操作. 永盛:切换 API 管理平台,继续撰写 A ...

  5. MyBatis Generator使用示例

    一.MBG介绍 MyBatis Generator(MBG)是一个Mybatis的代码生成器,它可以用来生成可以访问(多个)表的基础对象.MBG解决了对数据库操作有最大影响的一些简单的CRUD(插入, ...

  6. PHP实现DES加密，解决乱码

    PHP要实现DES加密,大体上有2个思路.一是用扩展,一是原生PHP实现. 这里推荐一个PHP原生实现的加密,是thinkphp的一个类库: https://github.com/top-think/ ...

  7. P2347 砝码称重 （01背包）

    题目描述 设有 1g1g1g . 2g2g2g . 3g3g3g . 5g5g5g . 10g10g10g . 20g20g20g 的砝码各若干枚(其总重 ≤1000 \le 1000≤1000 ), ...

  8. JEECG平台权限设计

    JEECG平台权限设计 链接存放位置:https://github.com/PlayTaoist/jeecg-lession/tree/master/%E6%9D%83%E9%99%90%E7%AE% ...

  9. docker swarm英文文档学习-9-使用Docker Configs存储配置数据

    Store configuration data using Docker Configs 使用Docker Configs存储配置数据 Docker 17.06引入了集群服务配置,允许你在服务镜像或 ...

  10. ubuntu 设置github秘钥

    github的SSH配置如下: 一 . 设置Git的user name和email: $ git config --global user.name "AmyOrz" $ git ...