轮廓(outline)是绘制于元素周围的一条线 位于边框边缘的外围 可起到突出元素的作用

CSS outline属性规定元素轮廓的样式 颜色和宽度

话不多说 来几个例子 看一看

1:在元素周围画线

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <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>

</html>

2:设置轮廓的颜色

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            p {

                border: red solid thin;

                outline: #00ff00 dotted thick;

                outline-color: blue;

            }

        </style>

    </head>

    <body>

        <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性</p>

    </body>

</html>

3:设置轮廓的样式

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            p {

                border: red solid thin;

                outline: #00ff00 dotted thick;

                outline-color: blue;

            }

            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 outline</p>

        <p class="dashed">A dashed outline</p>

        <p class="solid">A solid outline</p>

        <p class="double">A double outline</p>

        <p class="groove">A groove outline</p>

        <p class="ridge">A ridge outline</p>

        <p class="inset">An inset outline</p>

        <p class="outset">An outset outline</p>

        <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性</p>

    </body>

</html>

4:设置轮廓的宽度

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            p {

                border: red solid thin;

                outline: #00ff00 dotted thick;

                outline-color: blue;

            }

            p.pOne {

                border: red solid thin;

                outline-style: solid;

                outline-width: medium;

            }

            p.pTwo{

                border:red solid thin;

                outline-style:dotted;

                outline-width:3px;

            }

        </style>

    </head>

    <body>

        <p class="pOne">A dotted outline</p>

        <p class="pTwo">A dashed outline</p>

        <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性</p>

    </body>

</html>

CSS边框属性

HTML 学习笔记 CSS(轮廓)的更多相关文章

  1. amazeui学习笔记--css（常用组件12）--面板Panel

    amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...

  2. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  3. amazeui学习笔记--css（基本样式4）--打印样式Print

    amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...

  4. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  5. amazeui学习笔记--css（基本样式2）--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  6. amazeui学习笔记--css（基本样式）--样式统一Normalize

    amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

  7. amazeui学习笔记--css（常用组件16）--文章页Article

    amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...

  8. amazeui学习笔记--css（常用组件15）--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

  9. amazeui学习笔记--css（常用组件14）--缩略图Thumbnail

    amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...

随机推荐

  1. ios7 tableview被navigationbar挡住

    用ego下拉刷新的时候,每次在ios7时,tableview都会上移...导致被navagationbar挡住.ios6是正常的,于是在init的时候添加如下代码... NSComparisonRes ...

  2. ‘Cordova/CDVPlugin.h’ file not found

    phonegap项目,平时真机调试没什么问题.然后想打包成ipa了,去Product --> Archive 一下,然后就报错了,说:‘Cordova/CDVPlugin.h’ file not ...

  3. entityframework lamda 使用where时的注意事项

    我在项目中做了个底层 访问数据库泛型类 BaseEFDao<T> 在获取实体模型的时候使用了 Entities.CreateObjectSet<T>().Where(Func& ...

  4. iOS Address Book指南

    尽管OC是一门面向对象的语言,但是在你做开发的时候你会发现,并不是所有你用的frameworks都是面向对象的.有些是用C写的,例如Address Book的API,接下来让我们去学习一下Addres ...

  5. iOS本地推送与远程推送

    原文在此 分为本地推送和远程推送2种.可以在应用没有打开甚至手机锁屏情况下给用户以提示.它们都需要注册,注册后系统会弹出提示框(如下图)提示用户是否同意,如果同意则正常使用:如果用户不同意则下次打开程 ...

  6. Java 线程池

    系统启动一个线程的成本是比较高的,因为它涉及到与操作系统的交互,使用线程池的好处是提高性能,当系统中包含大量并发的线程时,会导致系统性能剧烈下降,甚至导致JVM崩溃,而线程池的最大线程数参数可以控制系 ...

  7. IOS开发之音频--录音

    前言:本篇介绍录音. 关于录音,这里提供更为详细的讲解网址:http://www.cnblogs.com/kenshincui/p/4186022.html#audioRecord  ,并且该博客有更 ...

  8. App.Config 和 WebConfig 特殊字符的转义码对应关系

    Web.Config默认编码格式为UTF-8,对于XML文件,要用到实体转义码来替换.对应关系如下: 字符 转义码 & 符号 & & 单引号 ' &apos; 双引号 ...

  9. Fourth glance in Go

    在Go里面的结构体和方法是很有意思的内容.它即和OO有点像,但又不完全一样.为什么这么说呢?当你把结构体映射为OO里面的类的时候,你给结构体添加方法,你就会发现其实方法与结构体并没有严格意义上的关系. ...

  10. Linux正则表达式grep

    正则表达式是一种符号表示法,用于识别文本模式.Linux处理正则表达式的主要程序是grep.grep搜索与正则表达式匹配的行,并将结果输送至标准输出. 1. grep匹配模式 grep按下述方式接受选 ...