首頁  >  文章  >  web前端  >  css3中關於outline如何為div元素新增輪廓線的實例

css3中關於outline如何為div元素新增輪廓線的實例

黄舟
黄舟原創
2017-07-27 09:18:352217瀏覽

css3 outline為div元素添加輪廓線

 有時為了樣式的更加美觀,可適當的為div添加輪廓線。可透過outline屬性來實現。

outline 包含以下幾個屬性值;

outline-width:輪廓線的粗細。

此屬性值包含4個參數:thin,medium,thick,length

thin:定義細輪廓;

medium:定義中型輪廓;

#thick:定義粗型輪廓。

length:可以指定輪廓線的粗細,註,此值不能為負值;

outline-style:輪廓線的樣式。

此屬性常用參數:

none:設定為none時,輪廓將不顯示.

##dotted:點輪廓線,

dashed:虛線輪廓線,

solid:實線輪廓線。

outline-color:輪廓線的顏色

此屬性的參數:

#顏色名稱:(red);

rgb顏色值:rgb( 255,255,255);

十六進位顏色值:如:#ff0000;

outline-offset:輪廓線與容器的偏移值。此值為負時,將向容器內顯示輪廓線。

範例程式碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=&#39;utf-8&#39; />
<title>无标题文档</title>
<style>
.aixuexi{
padding:20px;
position:fixed;
top:100px;
left:300px;
border:2px dashed #000;
width:100px;
height:100px;
line-height:100px;
background:#abcdef;
outline-width:10px;
outline-style:solid; 
outline-color:#99FF00;
outline-offset:20px;
}
</style>
</head>
<body>
<div class="aixuexi"><a href="#">hello world</a></div>
</body>
</html>

以上是css3中關於outline如何為div元素新增輪廓線的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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