アウトラインの太さを指定します。
※アウトラインとは要素の輪郭を表すものです。ボーダーと違って、要素の配置や余白に影響を与えません。
O7 / O9 / Fx2 / IE5 mac
要素[.class名][#id名]{ outline-width : 値; }
値 | 初期値 | 意味 |
数値+単位 | 太さを指定します。単位例:px,em,ex,% | |
thin | 細い線になります。 | |
medium | ○ | thinより太く、thickより細い線になります。 |
thick | 太い線になります。 | |
inherit | 親要素の値を継承します。 |
<html> <head> <title>サンプルコード</title> <style type="text/css"> #sample1 { outline-width : 5px; outline-color : #cc9966; } #sample2 { outline-width : thin; outline-color : #cc9999; } #sample3 { outline-width : medium; outline-color : #cc99cc; } #sample4 { outline-color : #cc99ff; outline-width : thick; } #sample span { outline-style : solid; margin : 10px; padding :5px; } </style> </head> <body> <p id="sample"> <span id="sample1">outline-width : 5px</span> <span id="sample2">outline-width : thin</span> <span id="sample3">outline-width : medium</span> <span id="sample4">outline-width : thick</span> </p> </body> </html>
outline-width : 5px outline-width : thin outline-width : medium outline-width : thick
outline / outline-color / outline-style