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 までご連絡ください。

HTMLとReactの統合：実用的なガイドApr 21, 2025 am 12:16 AM

HTMLとReactは、JSXを介してシームレスに統合して、効率的なユーザーインターフェイスを構築できます。 1）JSXを使用してHTML要素を埋め込み、2）仮想DOMを使用してレンダリングパフォーマンスを最適化し、3）コンポーネントを通じてHTML構造を管理およびレンダリングします。この統合方法は直感的であるだけでなく、アプリケーションのパフォーマンスを向上させます。

ReactおよびHTML：レンダリングデータと取り扱いイベントApr 20, 2025 am 12:21 AM

React Reactは、状態および小道具を介してデータを効率的にレンダリングし、合成イベントシステムを介してユーザーイベントを処理します。 1）Counterの例など、UseStateを使用して状態を管理します。 2）イベント処理は、ボタンクリックなどのJSXに関数を追加することにより実装されます。 3）トドリストコンポーネントなどのリストをレンダリングするには、重要な属性が必要です。 4）フォーム処理の場合、FormコンポーネントなどのuseStateおよびe.preventdefault（）。

バックエンド接続：Reactがサーバーとどのように相互作用するかApr 20, 2025 am 12:19 AM

Reactは、HTTP要求を介してサーバーと対話し、データを取得、送信、更新、削除します。 1）ユーザー操作はイベントをトリガーします。2）HTTP要求を開始する、3）サーバーの応答をプロセス、4）コンポーネントのステータスと再レンダリングを更新します。

React：ユーザーインターフェイスに焦点を当てる（Frontend）Apr 20, 2025 am 12:18 AM

Reactは、コンポーネント開発と仮想DOMを通じて効率を向上させるユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1。コンポーネントとJSX：JSX構文を使用してコンポーネントを定義して、コードの直感性と品質を高めます。 2。仮想DOMおよびレンダリング：仮想DOMおよびDIFFアルゴリズムを介してレンダリングパフォーマンスを最適化します。 3。状態管理とフック：UseStateやUseefectなどのフックは、状態管理と副作用の取り扱いを簡素化します。 4。使用例：基本形式から高度なグローバルな州管理まで、Contextapiを使用します。 5.一般的なエラーとデバッグ：不適切な状態管理とコンポーネントの更新の問題を避け、ReactDevtoolsを使用してデバッグします。 6。パフォーマンスの最適化と最適性

Reactの役割：フロントエンドまたはバックエンド？区別を明確にしますApr 20, 2025 am 12:15 AM

ReactisaFrontendLibrary、focusedonbuildinguserinterfaces.itmanagesUistateandupdateSeSefiedlyusingingingingualdod、およびinteractswithbackendservicesviaapisfordatahandling、butdoesnotprocessorstoredatoredaitaits

HTMLで反応する：インタラクティブなユーザーインターフェイスを構築しますApr 20, 2025 am 12:05 AM

ReactをHTMLに組み込み、従来のHTMLページを強化または完全に書き換えることができます。 1）Reactを使用するための基本的な手順には、HTMLにルートDIVを追加し、ReactDom.Render（）を介してReactコンポーネントをレンダリングすることが含まれます。 2）より高度なアプリケーションには、UseStateを使用して状態を管理し、カウンターやTo Doリストなどの複雑なUI相互作用を実装することが含まれます。 3）最適化とベストプラクティスには、コードセグメンテーション、怠zyな読み込み、React.memoとusememoを使用してパフォーマンスを向上させることが含まれます。これらの方法を通じて、開発者はReactの力を活用して、動的で応答性の高いユーザーインターフェイスを構築できます。

React：現代のフロントエンド開発の基礎Apr 19, 2025 am 12:23 AM

Reactは、最新のフロントエンドアプリケーションを構築するためのJavaScriptライブラリです。 1.パフォーマンスを最適化するために、コンポーネントおよび仮想DOMを使用します。 2。コンポーネントJSXを使用して、データを管理するために定義、状態、および属性を定義します。 3.フックはライフサイクル管理を簡素化します。 4. Contextapiを使用して、グローバルステータスを管理します。 5.一般的なエラーには、デバッグステータスの更新とライフサイクルが必要です。 6。最適化手法には、メモ、コード分割、仮想スクロールが含まれます。

Reactの未来：Web開発におけるトレンドと革新Apr 19, 2025 am 12:22 AM

Reactの未来は、究極のコンポーネント開発、パフォーマンスの最適化、および他のテクノロジースタックとの深い統合に焦点を当てます。 1）Reactは、コンポーネントの作成と管理をさらに簡素化し、究極のコンポーネント開発を促進します。 2）特に大規模なアプリケーションでは、パフォーマンスの最適化が焦点になります。 3）Reactは、開発エクスペリエンスを改善するために、GraphQLやTypeScriptなどのテクノロジーと深く統合されます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

メモ帳++7.3.1

使いやすく無料のコードエディター

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。