轮廓(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 方法总数超过 65536 . the number of method references in a .dex file exceed 64k

    一:问题描述:     应用中的Dex 文件方法数超过了最大值65536的上限,简单来说,应用爆棚了. 二.解决方案:      方案1:使用插件化框架  比如: https://github.com ...

  2. Android NDK之JNI陷阱

    背景: 最近一个月一直在做移植库的工作,将c代码到share library移植到Android平台.这就涉及到Android NDK(native develop kit)内容.这里只想记录下JNI ...

  3. UWP开发中两种网络图片缓存方法

    通常情况下,我们的程序需要从服务器读取图片,但如果需要不止一次读取某一张图片的话,就需要做本地缓存了,这样既为用户省一点流量,又能显得你的APP很快. 假如你已经知道了某一张图片的地址,那么第一件事就 ...

  4. iOS--页面跳转(UITableView)

    本文只要实现运用(UITableView)表格实现页面的传值,同时运用了代理(委托)传值. 目录文件列表如下: AddressBookViewController.h #import <UIKi ...

  5. IOS设计模式-观察者模式

    前言:23种软件设计模式中的观察者模式,也是在软件开发中,挺常用的一种设计模式.而在苹果开发中,苹果Cocoa框架已经给我们实现了这个设 计模式,那就是通知和KVO(Key-Value Observi ...

  6. Asp.Net Web Form 前后台传值

    1,后台往前台传值----单个变量直接传递到页面元素 前台代码 <b><%=strCompanyName%>费用明细</b> 后台代码 public partial ...

  7. 2014.1.23 Discuz论坛迁移+VPS配置手记

    虽说这也不是我第一次转移这个论坛了,但毕竟还是第一次自己配置VPS,写点东西记一下 一:关于VPS的配置 1.用TeamViewer连接服务器 这个VPS的IDC自己带有一个远程控制的页面,用浏览器打 ...

  8. Sql Server之旅——第十二站 sqltext的参数化处理

    说到sql的参数化处理,我也是醉了,因为sql引擎真的是一个无比强大的系统,我们平时做系统的时候都会加上缓存,我想如果没有缓存,就不会有什么 大网站能跑的起来,而且大公司一般会在一个东西上做的比较用心 ...

  9. 常用的主机监控Shell脚本

    最近时不时有朋友问我关于服务器监控方面的问题,问常用的服务器监控除了用开源软件,比如:cacti,nagios监控外是否可以自己写shell脚本呢?根据自己的需求写出的shell脚本更能满足需求,更能 ...

  10. PHP MSSQL 分页实例(刷新)

    <?php/* '页面说明:*/ $link=mssql_connect("MYSQL2005","sa","123456") or ...