2011年10月24日

border-styleプロパティ; ボーダーのスタイルの設定

スポンサード リンク

 ボーダーのスタイルの設定
border-style

border:none;ボーダーは描かれない。

border:solid 3px black; 実線

border:dotted 3px red; 点線

border:dashed 3px blue; 破線

border:double 5px brown; 二重線

border:groove 5px; 枠線を窪んだ感じで表示

border:ridge 10px silver; 枠線が盛り上がってみえる。

border:inset 5px; 内側全体がへこんだ感じ

border:outset 5px; 内側全体が隆起した感じ

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
<title>border-styleプロパティ 枠線の種類、指定</title>
 <style type="text/css">
<!--
   .OyaDiv{text-align:center;padding:10px 0;
              background:#e6e6fa;}

   .OyaDiv p{width:500px; margin:10px auto; padding:5px;
              background: #afeeee;}
    /* .OyaDivはページ装飾用 */

   #bStyle0 {border:none;}
   #bStyle1 {border:solid 3px black;}
   #bStyle2 {border:dotted 3px red;} 
   #bStyle3 {border:dashed 3px blue;}
   #bStyle4 {border:double 5px brown;}
   #bStyle5 {border:groove 5px;}
   #bStyle6 {border:ridge 10px silver;}
   #bStyle7 {border:inset 5px;}
   #bStyle8 {border:outset 5px;}
-->
</style>
</head>
<body>
    <div class="OyaDiv">
<p id="bStyle0">border:none;ボーダーは描かれない。</p>
<p id="bStyle1">border:solid 3px black;実線</p> 
<p id="bStyle2">border:dotted 3px red;点線</p> 
<p id="bStyle3">border:dashed 3px blue;破線</p> 
<p id="bStyle4">border:double 5px ;brown二重線</p>
<p id="bStyle5">border:groove 5px;枠線を窪んだ感じで表示</p>
<p id="bStyle6">border:ridge 10px silver; 枠線が盛り上がってみえる。</p>
<p id="bStyle7">border:inset 5px;内側全体がへこんだ感じ</p>
<p id="bStyle8">border:outset 5px;内側全体が隆起した感じ</p>
    </div>
</body>
</html>
border-style プロパティ
ボーダーのスタイルを設定
設定値 概要
none ボーダー表示なし(デフォルト)
solid 実線
dotted 点線
dashed 破線
double 二重線
groove 枠線を窪んだ感じで表示します。
ridge 枠線が隆起しているように見えます。
inset 枠線の内側を窪んだ感じで表示します。
outset 枠線の内側が浮き上がって見えます。

※ IE と Firefoxでは見え方が違います。
IE Firefox ともborder-widthの指定の仕方でも見え方が変わってきます。

画像に枠線を付ける border-style:ridge;

           額縁に入れたようでとても気に入ってます。
 HTML コード
<p style="width:320px; border:30px ridge silver;">
<img src="sea004.jpg" width="320" height="215" border="0"></p>

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
paddingプロパティ ボックスの内側の余白
text-align プロパティ
CSS positionプロパティ
回り込み、floatプロパティ/ 回り込み解除、clearプロパティ
visibilityプロパティ 領域の表示、非表示
display プロパティ
a:hoverで、へこむアンカーテキスト、リンクボタン

posted by javaScript at 20:36 | 大阪 ☀ | ボックス | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。