NO.67 ボーダー③

枠に関する設定です。

border-top,border-right,border-bottom,border-left
上下左右の枠線の太さ/デザイン/色を個別に指定できます。
Value: <border-top-width> || <border-style> || <color>

<div style="border-top:5px solid yellow;border-right:thin double pink;border-bottom:5px dashed blue;border-left:thick outset red;">This source is test.</div>

border
上下左右の枠線の太さ/デザイン/色を一括指定できます。
Value: <border-top-width> || <border-style> || <color>

<style type="text/css">
<!--
.t1{border:3px solid yellow;}     /*上下左右に3px,実線,黄色の枠*/
-->
</style>
<div class=t1>This source is test.</div>

上記の内容を応用
◆HEAD内の記述 <style type="text/css">  </style>
◆BODY内の記述 test:<br> <table class=zzA><tr><td>border-top:5px solid yellow;border-right:thin double pink; border-bottom:5px dashed blue;border-left:thick outset red;</td></tr></table><br> test:<br> <table class=zzB><tr><td>border:10px lime groove;</td></tr></table><br>
◆実行例

test:

border-top:5px solid yellow;border-right:thin double pink;border-bottom:5px dashed blue;border-left:thick outset red;

test:

border:10px lime groove;

前に戻る　次に進む

SEO		[PR] 爆速!無料ブログ無料ホームページ開設無料ライブ放送