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

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

青灯夜游

Dec 14, 2021 pm 06:03 PM

css3 境界線のプロパティ

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7450

CakePHP チュートリアル

1374

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) Jun 28, 2022 pm 01:39 PM

純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。

CSSを上手に使って色々な変わった形のボタンを実現（コード付き） Jul 19, 2022 am 11:28 AM

この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。

スペースを取らずにCSS内の要素を非表示にする方法 Jun 01, 2022 pm 07:15 PM

2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。

CSS3でレースボーダーを実装する方法 Sep 16, 2022 pm 07:11 PM

CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレーススタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。

テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。 Jun 10, 2022 pm 01:00 PM

テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。

CSS3でマウスクリックで画像を拡大する方法 Apr 25, 2022 pm 04:52 PM

実装方法: 1. ":active" セレクターを使用して、画像上のマウスクリックの状態を選択します; 2. 変換属性とscale() 関数を使用して、画像の拡大効果を実現します。構文 "img:active {transform : スケール(x 軸倍率、y 軸倍率);}"。

css3のアニメーション効果に変形はありますか？ Apr 28, 2022 pm 02:20 PM

css3 のアニメーション効果には変形があり、「animation: アニメーション属性 @keyframes ..{..{transform: 変換属性}}」を使用して変形アニメーション効果を実現できます。アニメーション属性はアニメーションスタイルを設定するために使用され、変形スタイルを設定するには、transform 属性を使用します。

css3アダプティブレイアウトとは何ですか Jun 02, 2022 pm 12:05 PM

「レスポンシブレイアウト」とも呼ばれるアダプティブレイアウトとは、画面の幅を自動的に認識し、それに応じて調整できる Web ページレイアウトを指します。このような Web ページは、端末ごとに特定のバージョンを作成するのではなく、複数の異なる端末と互換性を持たせることができます。。アダプティブレイアウトは、モバイル Web ブラウジングの問題を解決するために生まれ、さまざまな端末を使用するユーザーに優れたユーザーエクスペリエンスを提供できます。

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック