轮廓(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 studio 2.0即时运行功能探秘

    即时运行instant Run是android studio 2中,开发人员最关心的特性之一 在google发布studio 2.0之后,马上更新体验了一把,然而发现,并没快多少,说好的即时运行呢? ...

  2. 网络编程--ASI--(ASIHTTPRequest)介绍

    ASIHTTPRequest 虽然是明日黄花,但是还是稍微归纳一下,理清思路,知道这个曾经的她都能干嘛. 1. ASI基于底层的 CFNetworking 框架,运行效率很高. 2. 黄金搭档:ASI ...

  3. Listener监听器与Filter过滤器

    1.Listener     [1]监听器简介         > Listener是JavaWeb的三大组件之一,Servlet.Filter.Listener         > Li ...

  4. WebServer中异步操作的一些总结

    1.异步操作本身不会改善IO的性能 2.当任务多为IO操作时普通的工作线程将会减少,使CPU对工作线程的维护降低,从而提高CPU对其它任务的利用率 3.如果专用的IO线程,需要执行的专用任务较多时,专 ...

  5. 分享php工作中遇到的一些探究和技巧【1】

    一 foreach的引用 $arr = range(,); //[1,2,3] foreach($arr as &$val) { } foreach($arr as $val) { } pri ...

  6. drop和delete的区别是什么

    当你不再需要该表时, 用 drop;当你仍要保留该表,但要删除所有记录时, 用 truncate;当你要删除部分记录时(always with a WHERE clause), 用 delete.

  7. SQL Server(四)——查询练习（45道习题）

    题目:设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher). 四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1 ...

  8. mybatis 中#{}与${}的区别

    1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by "111&qu ...

  9. mysql字符编码集（乱码）问题解决

    1.创建数据库 CREATE DATABASE `test` CHARACTER SET 'utf8' COLLATE 'utf8_general_ci'; 创建表 CREATE TABLE tp_w ...

  10. Xcode同时兼容Xcode7和Xcode8，两个版本并存，也适用于先升8再安装7

    先吐槽一下之前看到的一个教程,如下: 先在应用程序内,拷贝一份之前的xcode,然后再安装新版本,发现这种安装完成就是在之前上面迭代了  有木有?等于没任何作用 我这边就是不小心先升级了8,然后再安装 ...