轮廓(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. android环境搭建

    Android开发环境的两种安装方式:JDK+Eclipse+ADT直接下载集成的开发工具,解压即可用.下载地址:http://pan.baidu.com/s/1dD3s3bN ,不管采用哪种安装方式 ...

  2. Android消息机制源码分析

    本篇主要介绍Android中的消息机制,即Looper.Handler是如何协同工作的: Looper:主要用来管理当前线程的消息队列,每个线程只能有一个Looper Handler:用来将消息(Me ...

  3. iOS之 PJSIP蓝牙外设音频支持

    如题,蓝牙设备作为音频输出,在app中如果包含VoIP那么就要设定当连接蓝牙设备时候是否选择或者支持蓝牙输出 最近在处理一个工单就是公司的voip-app与硬件话机底座联调(蓝牙2.0)坑爹的如果是4 ...

  4. 手机屏幕滑动效果框架——flipsnap

    下午有时间,研究了下手机网页开发方面的内容.其中关于手机手势滑屏操作.发现有比较好的jquery 插件--flipsnap. 官方网站:http://pxgrid.github.com/js-flip ...

  5. Node异步I/O、事件驱动与高性能服务器

    事件循环.观察者.请求对象.I/O线程池这四者共同构成了Node异步I/O模型的基本要素. 异步I/O流程:

  6. asp.net mvc SelectList 的selected 失效及解决方案

    ViewData 名 不能和 绑定的 DropdownListFor的字段名 重复  

  7. WPF学习之路（十四）样式和模板

    样式 实例: <Window.Resources> <Style x:Key="BtnStyle"> <Setter Property=" ...

  8. 从刚刚「简书」平台的短暂异常，谈Nginx An error occurred报错～

    09.26简书平台的短暂异常 An error occurred. Sorry, the page you are looking for is currently unavailable. Plea ...

  9. js判断游览器是移动端还是PC端

    js判断网页游览器是移动端还是PC端 <script type="text/javascript"> function browserRedirect() { var ...

  10. df,du,mount

    df 查看当前系统中文件系统的使用情况 $df [-aTh]缺省选项查看当前系统的所有文件系统 -a列出所有的信息 -T列出文件系统类型 -hhuman-readable,用合适的单位表示大小 $df ...