我喜歡用一行解決Border(邊框)設定。
習慣寫法是
border: 1 width 2style 3color;
單獨一項分開設定當然沒有問題,只是我喜歡縮減CSS的長度,不喜歡把語法搞得落落長。
▋以span為例,固定邊框的粗細為2px的效果如下:
實線
<span style="border: 2px solid red;"> 實線 </span>
虛線 <span style="border: 2px dashed red;"> 虛線 </span>
點線 <span style="border: 2px dotted red;"> 點線 </span>
虛線 <span style="border: 2px dashed red;"> 虛線 </span>
點線 <span style="border: 2px dotted red;"> 點線 </span>
▋下列幾種框線樣式要粗一點比較明顯,設邊框粗細為6px的效果如下:
雙實線
<span style="border: 6px double #ccc;"> 雙實線 </span>
線內凹 <span style="border: 6px groove #ccc;"> 線內凹 </span>
線凸出 <span style="border: 6px ridge #ccc;"> 線凸出 </span>
上斜角 <span style="border: 6px outset #ccc;"> 上斜角 </span>
下斜角 <span style="border: 6px inset #ccc;"> 下斜角 </span>
線內凹 <span style="border: 6px groove #ccc;"> 線內凹 </span>
線凸出 <span style="border: 6px ridge #ccc;"> 線凸出 </span>
上斜角 <span style="border: 6px outset #ccc;"> 上斜角 </span>
下斜角 <span style="border: 6px inset #ccc;"> 下斜角 </span>
▋也可以像內外距一樣一條設四邊款式: border-style: 1上 2右 3下 4左 ;
以span為例,固定邊框的粗細為3px的效果如下:
實線
<span style="border-style: dotted solid dashed double; border-width: 3px;">
0 Comments:
張貼留言