CSS学習(三)-cssボーダースタイル(上)

3816 ワード
css css 3
一、理論:
1.css枠線概要a.border-width設定太さb.border-color設定色c.border-style設定タイプd.以上はTRBLの原則を遵守する、例:border-top-style 2.外枠のタイプa.none外枠b.hidden外枠はないが、表では外枠衝突c.dotted点状外枠d.dashed破線外枠e.solid実線外枠f.double二線外枠g.groove溝外枠h.ridge畝状外枠i.inset 3 d inset外枠j.outset 3 d outset外枠k.inheritは親要素から外枠スタイルを継承するが、一部のブラウザではこの属性3をサポートする.異なるブラウザプレフィックス:a.-moz-firefox b.-o-Opera c.-khtml-Konqueror d.-ms-Internet Explorer e.プラグイン-prefix-freeブラウザプレフィックス4を省略することができる.border-imageプロパティ構文およびパラメータ:a.noneバックグラウンドなしb.imageバックグラウンドピクチャc.方位を表すd.フレームバックグラウンドピクチャサイズ(パーセント)e.stretchrepeatroundストレッチ繰り返しフラットフレームバックグラウンド
二、実践:
1. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .border-image{
            background-color: #6bb2ff;
            width:150px;
            height: 100px;
            border: 27px solid;
            -webkit-border-image: url(images/border.jpg) 27 round stretch;
            -moz-border-image: url( images/border.jpg) 27 round stretch;
            -o-border-image: url( images/border.jpg) 27 round stretch;
            -ms-border-image: url( images/border.jpg) 27 round stretch;
        }
        .border-image-repeat{
            background-color: #6bb2ff;
            width:150px;
            height: 100px;
            border: 27px solid;
            -webkit-border-image: url(images/border.jpg) 27 repeat stretch;
            -moz-border-image: url( images/border.jpg) 27 repeat stretch;
            -o-border-image: url( images/border.jpg) 27 repeat stretch;
            -ms-border-image: url( images/border.jpg) 27 repeat stretch;
        }
        .border-image-stretch{
            background-color: #6bb2ff;
            width:150px;
            height: 100px;
            border: 27px solid;
            -webkit-border-image: url(images/border.jpg) 27 stretch stretch;
            -moz-border-image: url( images/border.jpg) 27 stretch stretch;
            -o-border-image: url( images/border.jpg) 27 stretch stretch;
            -ms-border-image: url( images/border.jpg) 27 stretch stretch;
        }

    </style>
</head>
<body>
    <div class="border-image"></div>
    <div class="border-image-repeat"></div>
    <div class="border-image-stretch"></div>
</body>
</html>
2. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .border-image{
            background-color: #6bb2ff;
            width:150px;
            height: 100px;
            border: 27px solid;
            -webkit-border-image: url(images/border.jpg) 27 stretch round ;
            -moz-border-image: url( images/border.jpg) 27 stretch round ;
            -o-border-image: url( images/border.jpg) 27 stretch round ;
            -ms-border-image: url( images/border.jpg) 27 stretch round ;
        }
        .border-image-repeat{
            background-color: #6bb2ff;
            width:150px;
            height: 100px;
            border: 27px solid;
            -webkit-border-image: url(images/border.jpg) 27 stretch repeat;
            -moz-border-image: url( images/border.jpg) 27 stretch repeat;
            -o-border-image: url( images/border.jpg) 27 stretch repeat;
            -ms-border-image: url( images/border.jpg) 27 stretch repeat;
        }
    </style>
</head>
<body>
    <div class="border-image"></div>
    <div class="border-image-repeat"></div>
</body>
</html>
簡単なウェブページの需要を満たすために、個人CSSノート
JavaScriptオブジェクト向けプログラミング実戦01 JavaScript Resource Loader