轮廓(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. iOS 三方库fmdb 的使用

    使用fmdb 做本地数据的存储非常方便, 1. github 上搜索fmdb 下载压缩包 导入到工程中 (如果你的mac 有cocoapod 也可以直接通过cocoapod 添加) 2. 以下代码是通 ...

  2. spring.net （3）依赖注入基础

    属性的注入: 在上篇例子中已经出现并解释过: <object id="dog" type="SpringDemo.Dog,SpringDemo" sing ...

  3. iOS 子视图超出父视图范围点击事件处理!

    - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{   UIView *view = [super hitTest:point ...

  4. 我的Android第四章：Android的adb命令使用以及SQlite数据库运用

    adb是什么?:adb的全称为Android Debug Bridge,就是起到调试桥的作用.      adb有什么用?:借助adb工具,我们可以管理设备或手机模拟器的状态.还可以进行很多手机操作, ...

  5. iOS开发之多线程技术——GCD篇

    本篇将从四个方面对iOS开发中GCD的使用进行详尽的讲解: 一.什么是GCD 二.我们为什么要用GCD技术 三.在实际开发中如何使用GCD更好的实现我们的需求 一.Synchronous & ...

  6. iOS-公司开发者账号的申请和注册(博主原创+亲身经历+2016年申请+附带与邓白氏公司的往来邮件截图)

    不吹不黑,此篇博客真乃我的良心之作啊,希望对大家有所帮助! 链接在简书:http://www.jianshu.com/p/9de6a8eb4d88

  7. NSDate 格式化 NSDate to NSString

    NSLog(@"%@",[NSDate stringFromDate:[NSDate date] withFormat:@"yyyyMMdd__HH_mm_ss_zzz& ...

  8. 【问题排查】StringIndexOutOfBoundsException

    工作中遇到 java.lang.StringIndexOutOfBoundsException ,查看网上资料,总结如下 1.异常定义: Java API指出StringIndexOutOfBound ...

  9. Android Studio中怎么使用DDMS工具？

    随着android studio的广泛使用,开发人员对相关工具的使用需求更加凸显.昨天在一个android studio教程网站上,看到一篇有关DDMS工具使用的相关知识,感觉很不错,分享给大家,一起 ...

  10. 集群服务器 时间同步 - Chrony

    greenplum,openstack等云计算项目需要集群服务器部署,服务器之间的时间需要同步,但并不是所有机器可以 直接连外网,这时可以用Chrony工具解决. 解决方法是将其中一台设为时间服务器, ...