border・背景
2009-08-09 (日) 20:19:00 (213d)

lifebuoy.png HTML5のborderおよび背景画像についてのまとめ。

背景（background）画像 　

-webkit-background-clip 　

  • 背景（background-color/background-image）の描画範囲を指定します。
  • 指定は「border」または「padding」で指定します。※線種類を「点線（dotted）」や「（破線dashed）」にした上でborderを幅広くとると、違いが一目瞭然です。

    -webkit-background-clip: border

-webkit-background-origin 　

  • 背景画像の表示開始位置を指定します。
  • 「border」「padding」「content」が指定可能で、この順番に画像の描画開始位置が、外側から内側に入り込んできます。

    -webkit-background-origin: border

    border:
padding:
content:

-webkit-background-size 　

  • 背景画像のサイズ指定を行う。

    -webkit-background-size: length
    -webkit-background-size: length-x length-y

Mulitple Background Images 　

  • 上下左右、上部左右、下部左右の計8ヶ所の画像を個別に指定することが出来ます。
  • それにより、例えば丸みを持ったスタイルの描画が可能です。 
    p {
background:
url("img/top-left.png") no-repeat top left,
url("img/top-right.png") no-repeat top right,
url("img/bottom-left.png") no-repeat bottom left,
url("img/bottom-right.png") no-repeat bottom right,
url("img/left.png") repeat-y left,
url("img/top.png") repeat-x top,
url("img/right.png") repeat-y right,
url("img/bottom.png") repeat-x bottom;
}

Border 　

-webkit-border-image 　

  • 1枚の画像からサイズ可変な罫線を表示する。※ブラウザが1枚の画像を9分割して描画する。

    -webkit-border-image: url("border.png") 上辺からの距離 右辺からの距離 下辺からの距離 左辺からの距離（数値pixelまたは割合%） / border-width

    -webkit-border-image: url("border.png") 10 10 10 10 / 15px;

    border-image: uri top right bottom left x_repeat y_repeat
    border-image: uri top right bottom left / border x_repeat y_repeat
    border-image: uri top right bottom left / top_border right_border bottom_border left_border x_repeat y_repeat

-webkit-border-radius 　

  • -webkit-border-radiusは、四方の角の「丸み」を個別に指定できる。

    -webkit-border-top-left-radius（左上角の半径を指定）
    -webkit-border-top-right-radius（右上角の半径を指定）
    -webkit-border-bottom-right-radius（右下角の半径を指定）
    -webkit-border-bottom-left-radius（左上角の半径を指定）

  • webkit-border-radius: 40px 20px;
    • とすることで、Safari3では水平方向・垂直方向の指定が、FireFox3では左上と右下の角・右上と左下の角の指定がそれぞれ可能。なお、border: none;時には背景が角丸処理されるが、背景画像の場合はSafari3では角丸処理されるが、FireFox3では角丸処理がされない。 
      div.box {
-moz-border-radius: 5px;　　/* Firefox3一括指定の場合 */
-webkit-border-radius: 5px;　/* Safari3一括指定の場合 */
border: 1px solid #000;
padding: 20px;　/*paddingを入れないと中身がハミ出す可能性がある */
}

-webkit-border-horizontal-spacing 　

  • ボーダーの間隔の水平部分を指定

-webkit-border-vertical-spacing 　

  • ボーダーの間隔の垂直部分の指定

boxその他（シャドウ・サイズ） 　

-webkit-box-shadow 　

  • box要素のシャドウ描画指定を行います。
  • 横方向のオフセット、縦方向のオフセット、ぼかしの半径、影の色を指定。インライン要素や:first-letter、:first-lineにも指定可能。重なり時も影は結合せず個別に描画する。

    -webkit-box-shadow: hoff voff blur color

    -webkit-box-shadow: 10px 10px 10px gray;　通常のドロップシャドウ
-webkit-box-shadow: 10px 10px 0 gray;　ぼかしなしのシャドウ
-webkit-box-shadow: 0 0 50px gray;　まわりにぼかし

-webkit-box-sizing 　

  • box描画時の動作指定。boxについてのwidth指定などを、ボーダー部分（margin/paddingでの指定範囲）を含めるか、コンテンツ部分だけにするかを指定できる。無指定時はcontent-box

    box-sizing: mode

    content-box:コンテンツ部分のみを計算対象とする（結果、描画されるboxは大きくなる）
border-box:ボーダー部分も計算対象とする（結果、描画されるboxは小さくなる）



スポンサード　リンク