CSS3 ボーダーの新機能は何ですか?-フロントエンドQ&A-php.cn

css3 border に新しく追加された機能には、border-radius、border-image、border-image-outset、border-image-repeat、border-image-slice、border-image-width などがあります。

CSS3 ボーダーの新機能は何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 ボーダーの新しく追加された機能 (プロパティ)

#3box-decoration-breakインライン要素が壊れていることを指定します3box-shadowボックスに 1 つ以上の影を追加します。 box-reflect

境界線イメージ

CSS3 の新しい境界線属性は、元のボックスモデルの機能を拡張し、境界線に背景画像属性を含めることができるようにします。以前は、ボーダーには幅、色、スタイルの属性しかありませんでした。

ボーダーの背景画像属性を実装するには、通常、シミュレーションにパディング属性と背景属性が使用されますが、これによりボックスの背景の設定が難しくなります

文法形式: 構文はです CSS 略語スタイル

# Description:

画像パスを使用してオブジェクトの境界線スタイルを設定または取得します。

border-style 境界線スタイル属性の置き換えに使用する画像を指定します。 border-image が none の場合、または画像が非表示の場合は、border-style で定義されたボーダースタイル効果が表示されます。

対応するスクリプト機能は borderImageSource です。＃＃＃＃＃＃＃＃＃価値：＃＃＃ none：背景画像なし。 なし: 背景画像はありません。

: 画像を絶対アドレスまたは相対アドレスで指定します。

[境界画像スライス分割法]

＃＃＃＃＃＃＃＃＃説明：＃＃＃＃＃＃＃＃＃

この属性は、画像を上下左右の方向に分割することを指定します。画像は、4 隅、4 辺、中央領域の合計 9 つの部分に分割されます。中央領域はキーワード fill が追加されない限り、常に透明 (つまり、画像の塗りつぶしはありません) です。

対応するスクリプト機能は borderImageSlice です。＃＃＃＃＃＃＃＃＃価値：＃＃＃：幅を浮動小数点数で指定します。負の値は許可されません。

<%>: 幅をパーセンテージで指定します。負の値は許可されません。

[

/ [ border-image-width ボーダー幅]? |

説明:

オブジェクトの境界線の太さを設定または取得します。

この属性は、トリミングされた画像を表示するために使用される境界線の太さを指定するために使用されます。

この属性は省略可能で、外部のborder-widthによって定義されます。

対応するスクリプト機能は borderImageWidth です。＃＃＃＃＃＃＃＃＃価値：＃＃＃

: 長さの値を使用して幅を指定します。負の値は許可されません。

: 幅をパーセントで指定します。負の値は許可されません。

: 幅を浮動小数点数で指定します。負の値は許可されません。

Auto: auto 値が設定されている場合、border-image-width は border-image-slice と同じ値になります。

注意すべき点: 値のサイズはボックスモデルに追加されません。Chrome のサイズは 3 ピクセルになり、他のブラウザの境界線のサイズは 0 |

/ [border-image-outset 拡張メソッド] 説明:

オブジェクトのオブジェクトの背景図を設定または取得します。

この属性は枠線画像の外側への拡張を指定するための属性で、値が 10px の場合、元の画像を外側に 10px 拡張して表示します。

対応するスクリプト機能は borderImageOutset です。＃＃＃＃＃＃＃＃＃価値：＃＃＃

: 長さの値を使用して幅を指定します。負の値は許可されません。

: 幅を浮動小数点数で指定します。負の値は許可されません。

]

[border-image-repeat リピートモード]

＃＃＃＃＃＃＃＃＃説明：＃＃＃＃＃＃＃＃＃

この属性は、ボーダー背景画像の塗りつぶし方法を指定するために使用されます。 0 ～ 2 個のパラメータ値、つまり水平方向と垂直方向を定義できます。 2 つの値が同じ場合は 1 つにマージでき、境界線の背景画像が水平方向と垂直方向の両方で同じ方法で塗りつぶされることを示します。両方の値がストレッチの場合は省略できます。

対応するスクリプト機能は borderImageOutset です。

# ストレッチ: フレームの背景マップをストレッチ方法で指定します。

繰り返し: 境界線の背景画像を塗りつぶすタイリング方法を指定します。画像が境界に達すると、それを超えると切り捨てられます。

Round: 境界線の背景画像を塗りつぶすタイリング方法を指定します。画像は、境界線全体にちょうど収まるまで、境界線のサイズに応じてそのサイズを動的に調整します。このドキュメントの執筆時点では、この効果は Firefox でのみ確認できます。

スペース: 境界線の背景画像を埋めるタイリング方法を指定します。画像は、境界線全体を正確にカバーできるようになるまで、境界線のサイズに応じて画像間の間隔を動的に調整します。このドキュメントの執筆時点では、この効果を確認できるブラウザはありません。

#CSS3 新しいプロパティの例

1、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) no-repeat center  ;
        border-image-source:none;
    }
</style>
</head>
<body>
    <div></div>
</body>

ログイン後にコピー

2、

<style>
div{
    width:300px;
    height:300px;
    background:url(./shuaige.jpg) center no-repeat ;
    border-image-source:url(./border.png);/*边框图片属性*/
    border-image-width:27px;/*边框图片宽度属性*/
    border-image-slice:27;/*边框图片切割属性*/
    border-image-outset:0px;/*边框图片扩展属性*/
    border-image-repeat:stretch;/*边框图片重复属性*/
}
</style>
</head>
<body>
    <div>
    </div>
</body>

ログイン後にコピー

3、

<style>
div{
    width:300px;
    height:300px;
    background:url(shuaige.jpg) no-repeat center;
    border-image-source:url(border.png);
    border-image-width:27px;
    border-image-slice:27;
    border-image-outset:0px;
    border-image-repeat:repeat;/*设定重复方式为重复*/
}
</style>
</head>
<body>
    <div>
    </div>
</body>

ログイン後にコピー

4、

<style>
            div{
                width:300px;
                height:300px;
                background:url(shuaige.jpg) no-repeat center;
                border-image-source:url(border.png);
                border-image-width:27px;
                border-image-slice:27;
                border-image-outset:0px;
                border-image-repeat:round;/*设定重复方式为round   会看情况进行缩放或缩小*/
            }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>

ログイン後にコピー

5、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);/*边框图片属性*/
        border-image-width:27px;/*边框图片宽度属性*/
        border-image-slice:27 fill;
        /*设定边框图片背景填充内容部分,会显示第5块切割的内容*/
        border-image-outset:0px;/*边框图片扩展属性*/
        border-image-repeat:stretch;/*边框图片重复属性*/
    }
</style>
</head>
<body>
    <div>
    </div>
</body>

ログイン後にコピー

6、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);
        border-image-width:27px;
        border-image-slice:54;/*切割为宽度的2倍   会自动缩放*/
        border-image-outset:0px;
        border-image-repeat:stretch;
    }
</style>
</head>
<body>
<div>
</div>
</body>

ログイン後にコピー

7、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);
        border-image-width:27px;
        border-image-slice:81;/*切割为宽度的3倍*/
        border-image-outset:0px;
        border-image-repeat:stretch;
    }
</style>
</head>
<body>
<div>
</div>
</body>

ログイン後にコピー

8、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);
        border-image-width:27px;
        border-image-slice:27;
        border-image-outset:154px;/*向外扩展的大小*/
        border-image-repeat:repeat;
    }
</style>
</head>
<body>
<div>
</div>
</body>

ログイン後にコピー

（学習ビデオ共有: css ビデオチュートリアル)

Properties	Description	CSS
border-radius	オブジェクトの丸い境界線を設定または取得します。
border-bottom-left-radius	オブジェクトの左下隅の丸い境界線を設定または取得します。スペースで区切って 2 つのパラメータを指定します。各パラメータには 1 つのパラメータ値を設定できます。最初のパラメータは水平方向の半径を表し、2 番目のパラメータは垂直方向の半径を表します。2 番目のパラメータを省略した場合は、デフォルトで 1 番目のパラメータが使用されます。	3
border-bottom-right-radius	オブジェクトの右下隅の丸い境界線を設定または取得します。	3
border-top-left-radius	左上の境界線の形状を定義します。	3
border-top-right-radius	右上の境界線の形状を定義します。	3
border-image	画像で塗りつぶすオブジェクトの境界線スタイルを設定または取得します。	3
border-image-outset	境界線イメージが境界線を超える量を指定します。	3
border-image-repeat	画像の境界線を繰り返す (繰り返す)、伸ばす (伸ばす)、または覆う (丸める) かどうかを指定します。）。	3
border-image-slice	画像境界線の内側のオフセットを指定します。	3
border-image-source	border-style プロパティで設定した境界線スタイルの代わりに使用する画像を指定します。	3
border-image-width	画像の境界線の幅を指定します。

	#3
オブジェクトのリフレクションを設定または取得します	3

以上がCSS3 ボーダーの新機能は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。