2011年10月25日

borderプロパティ css

スポンサード リンク

 ボーダーの幅、線種、色の設定
border-width: border-style: border-color:

borderプロパティ 説明 プロパティの値
border 四辺のボーダー border-width  // ボーダーの幅 
border-style  // ボーダーの種類
border-color //  ボーダーの色

 上記,三つのプロパティの値を順不同で
まとめて指定することができます。
border:2px solid lime;
border-top:red solid 15px
border-top 上のボーダー
border-right 右のボーダー
border-bottom 下のボーダー
border-left 左のボーダー

(枠線0) border:2px solid lime; // 幅 "2px"  種類 "実線"  カラー "lime"

(枠線1) border:6px dotted maroon; // 幅 "6px"  種類 "点線"  カラー "maroon"

(枠線2)border-left:15px solid purple;  border-bottom:1px solid purple;

(枠線3)枠線を太く して、上下・左右の色を変えてみました。
枠線が斜めになって接しています。これは使えそう!吹き出しポップアップ

(枠線4)上・枠線を透明に,右は指定を外し,下は太さを1pxに色は左に合わせます。

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

サンプルソース

<html>
 <head>
<title>borderプロパティ 枠線の指定</title>
 <style type="text/css">
<!--
   #bDer0{ border: 2px solid lime;
           padding:4px; }

   #bDer1{ border: 6px  dotted maroon;
           padding: 4px; }

   #bDer2{ border-left: 15px solid purple;
           border-bottom: 1px solid purple;
           padding: 4px; }

   #bDer3{ border-top: 7px solid  fuchsia; /*枠線 上*/
           border-right: 15px solid purple; /*枠線 右*/
           border-bottom: 15px solid fuchsia; /*枠線 下*/
           border-left: 15px solid purple; /*枠線 左*/
           width: 520px; padding : 4px; }

  #bDer4{ border-top: 7px solid transparent;/*transparent(透明)*/
          border-bottom: 1px solid purple;
          border-left: 15px solid purple;
          width: 560px; padding : 2px; }
-->
</style>
</head>
<body>
    <p id="bDer0">(枠線0) </p>
    <p id="bDer1">(枠線1) </p>
    <p id="bDer2">(枠線2)</p>
    <p id="bDer3">(枠線3)</p>
    <p id="bDer4">(枠線4)</p>
</body>
</html>
border プロパティ
  上下左右のボーダーを一括して指定します。
border-width  // ボーダーの幅 
border-style  // ボーダーの種類
border-color //  ボーダーの色
 上記の値を順不同でスペースで区切って記述します。
border: 3px solid #fa8074;
border-top ・ border-right ・border-bottom ・border-left
     上右下左のボーダーに異なる値を指定します。
border-top:3px solid red;
border-right:4px dotted green;
border-bottom:5px dashed deeppink;
border-left:6px double blue;
border-width
     ボーダーの幅を指定します。
border-color:lime;
border-style:solid;
border-width:5px 15px;
// (上下)(左右)
border-widthの値    // 数値+px,em,など | キーワード
       1つ(上下左右)
       2つ(上下)(左右)
       3つ(上)(左右)(下)
       4つ (上) (右) (下) (左)
border-***-width:値; *** にtop,right,bottom,leftのいずれかを
      入れて個別に指定することができます。
border-style
     ボーダーの線種を指定します。
border-color:aqua;
border-width:5px;

border-style:solid dotted double; //(上)(左右)(下)
border-styleの値 // solid(実線), dotted(点線)など。
       1つ(上下左右)
       2つ(上下)(左右)
       3つ(上)(左右)(下)
       4つ (上) (右) (下) (左)
border-***-style:値; *** にtop,right,bottom,leftのいずれかを
      入れて個別に指定することができます。
border-color
     ボーダーの色を指定します。
border-width:20px;
border-style:solid;
border-color:transparent maroon transparent;
(上)(下)にtransparent(透明)を設定しているのでこのように見えます。
border-colorの値  // 色の名前、カラーコード
       1つ(上下左右)
       2つ(上下)(左右)
       3つ(上)(左右)(下)
       4つ (上) (右) (下) (左)
border-***-color:値; *** にtop,right,bottom,leftのいずれかを
      入れて個別に指定することができます。

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

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

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