首頁 > 文章 > web前端 > CSS中Outlines輪廓的具體分析

CSS中Outlines輪廓的具體分析

黄舟原創: 2017-07-27 09:15:011847瀏覽

描述:

繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用.不佔據空間.

在IE下不可用.

##outline-widththin:小於預設寬度

屬性	描述	備註
outline	複合屬性設定或擷取物件外的線條輪廓,外輪廓(outline)畫在邊框(border)的外面,不一定是矩形	outline:outline-color\|\|outline-style\|\|outline-width
outline-color	設定或擷取物件外的線條輪廓的顏色	color:顏色 invert:預設值,使用背景色的反色
outline-style	設定或擷取物件外的線條輪廓的樣式	none:預設值 dotted:點線外輪廓 dashed:虛線外輪廓 solid:實線外輪廓 double:雙線外輪廓 groove:根據outline-color的值畫3D凹槽外輪廓 ridge:根據outline-color的值畫3D凸槽外輪廓 inset:根據outline- color的值畫3D凹邊外輪廓 outset:根據outline-color的值畫3D凸邊外輪廓
##設定或檢索物件外的線條輪廓的寬度	medium:預設.預設寬度	thick:大於預設寬度 length:長度

實例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <style type="text/css">
        
        span
        {
        	border:solid 1px red;
        	display:block;
        	width:200px;
        }
        
        .span1
        {
        	outline-style:dotted;
        }
        
        .span2
        {
        	outline-style:dashed;
        }
        
        .span3
        {
        	outline-style:groove;
        }
        
        .span4
        {
        	outline-style:ridge;
        }
        
        .span5
        {
        	outline-style:inset;
        }
        
        .span6
        {
        	outline-style:outset;
        }
    
    </style>
</head>
<body>
    <span class="span1">111111111</span><br />
    <span class="span2">222222222</span><br />
    <span class="span3">333333333</span><br />
    <span class="span4">444444444</span><br />
    <span class="span5">555555555</span><br />
    <span class="span6">666666666</span>
</body>
</html>

在Firefox下效果

以上是CSS中Outlines輪廓的具體分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS中behavior屬性的介紹與實例使用下一篇：CSS中behavior屬性的介紹與實例使用

看更多