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中文網其他相關文章!