CSS3中的outline屬性是一種很有用的樣式屬性,它可以為一個元素添加邊框之外的輪廓線。這個輪廓線可以和邊框不同,而且有更多的樣式可以選擇。
div{ outline: 5px dotted red; }
在上面的例子中,我們為div元素添加了一個5像素寬的虛線輪廓線,并設置為紅色。我們也可以使用其他樣式,例如實線、雙線、點線、點、地形、輸入等等。同樣,我們可以指定顏色、寬度等其他選項。
p{ outline-color: blue; outline-style: solid; outline-width: 2px; }
上面的例子中,我們指定了一個2像素寬的實線輪廓線,顏色為藍色。我們也可以分別指定每個選項的值,或者只指定一些選項,其他選項使用默認值。例如,我們只想為一個元素添加輪廓線顏色,可以通過下面的代碼實現。
a{ outline-color: green; }
最后,有些時候我們可能不想要輪廓線占用空間,這時可以使用outline-offset選項來調整輪廓線位置。例如,我們想讓輪廓線在元素內部,可以這樣寫:
div{ outline: 2px solid blue; outline-offset: -5px; }
上述代碼將輪廓線向內調整了5像素。這個功能可以非常便捷地實現類似于點擊效果等視覺效果。