css3中關於outline如何為div元素新增輪廓線的實例
- 黄舟原創
- 2017-07-27 09:18:352262瀏覽
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='utf-8' />
<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