zoukankan      html  css  js  c++  java
  • CSS(9)轮廓

      在CSS中,outline属性用于设置元素的轮廓,轮廓是绘制于元素周围的一条线,位于边框(border)边缘的外围,可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式(outline-style)、颜色(outline-color)和宽度(outline-width)。

    一、outline-style

       outline-style 属性用于设置元素的整个轮廓的样式。outline-style属性的取值包括none(无轮廓)、solid(实线轮廓)和dashed(虚线轮廓)等,样式不能是 none,否则轮廓不会出现。

      注意:1.在设置 outline-color 属性之前声明 outline-style 属性,因为元素只有获得轮廓以后才能改变其轮廓的颜色;

         2.轮廓线不会占据空间,也不一定是矩形。

           3.默认情况下,除了IE浏览器,所有主流浏览器都支持 outline-style 属性;要想使IE浏览器支持元素的 outline-style 属性,给文档加上 !DOCTYPE文档声明即可。

    /*设置段落的轮廓样式为点线轮廓*/
    p
      {
      outline-style:dotted;
      }

    二、outline-color

      outline-color 属性设置一个元素整个轮廓中可见部分的颜色。outline-color属性的取值可以是颜色名称(比如red)、十六进制的颜色值(比如#ff000000)或rgb颜色值(如rgb(255,0,0))。

      注意:1.轮廓的样式(outline-style)不能是 none,否则轮廓不会显示。

         2.和outline-style属性一样,只有在规定了 !DOCTYPE 时,IE浏览器才支持 outline-color 属性。

    /*为段落设置绿色点线轮廓*/
    p 
    {
    border:red solid thin;
    outline-style:dotted;
    outline-color:#00ff00;
    }

    三、outline-width

      outline-width 属性设置元素整个轮廓的宽度,只有当轮廓样式不是 none 时,这个宽度才会起作用。如果样式为 none,宽度实际上会重置为 0。outline-width属性的取值可以是thin(细轮廓)、medium(默认,中等粗细的轮廓)、thick(粗轮廓)或length(自定义轮廓粗细的值)等。但是,不允许设置负长度值。

    /*设置段落的轮廓为5px宽的点状轮廓*/
    p
      {
      outline-style:dotted;
      outline-width:5px;
      }

    四、outline

      outline属性是前面三个属性(outline-style、outline-color和outline-width)的简写属性,该属性用于在一个声明中设置所有的轮廓属性。这三个属性的顺序也是任意的。

      下面是一个采用简写outline属性设置元素轮廓的完整示例。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html>
     3 <head>
     4 <style type="text/css">
     5 p 
     6 {
     7 /*设置段落边框*/
     8 border:red solid thin;
     9 /*为段落设置轮廓(点线红色粗轮廓)*/
    10 outline:#00ff00 dotted thick;
    11 }
    12 </style>
    13 </head>
    14 
    15 <body>
    16 <p><b>注释:</b>只有在规定了 !DOCTYPE 时,Internet Explorer 8 (以及更高版本) 才支持 outline 属性。</p>
    17 </body>
    18 </html>

    示例效果如下图:

    参考:http://www.w3school.com.cn/css/css_outline.asp

  • 相关阅读:
    python学习笔记(二)
    python学习笔记(四)
    首个python程序,一个猜数字的小游戏 ^0^
    python生成随机数
    python生成随机数
    python学习笔记(四)
    我的书《编写高质量代码—Web前端开发修炼之道》面市了,请大家多多支持
    python学习笔记(三)
    EasyNVR纯H5摄像机直播解决方案前端解析之:RTSP安防监控实时直播的网页H5自动播放方案
    基于EasyNVR实现RTSP_Onvif监控摄像头Web无插件化直播监控
  • 原文地址:https://www.cnblogs.com/sunyunh/p/2666196.html
Copyright © 2011-2022 走看看