CSSで枠線を追加する方法-CSSチュートリアル-php.cn

CSSで枠線を追加する方法

醉折花枝作酒筹

リリース： 2021-07-26 10:41:49

オリジナル

11095 人が閲覧しました

境界線を追加する方法は次のとおりです: 1. border 属性、要素のコンテンツとパディングを囲む 1 つ以上の線。この属性を使用すると、要素の境界線のスタイル、幅、色を指定できます。2. border-image属性、border-image 属性は、画像の境界線を設定するために使用されます。

CSSで枠線を追加する方法

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

CSS border プロパティ

要素の境界線は、要素のコンテンツとパディングを囲む 1 つ以上の線です。

各境界線には、幅、スタイル、色という 3 つの側面があります。

CSS 境界線プロパティを使用すると、要素の境界線のスタイル、幅、色を指定できます。

border 短縮表現プロパティは、1 つの宣言ですべてのボーダープロパティを設定します。

次の属性を順番に設定できます。

border-width: 境界線の幅を指定します。

border-style: 境界線のスタイルを指定します。

border-color: 境界線の色を指定します。

例:

<html>
<head>
<style type="text/css">
div{border:1px solid #000} 
</style>
</head>

<body>
<div>div添加边框</div>
</body>

</html>

ログイン後にコピー

Effect

CSSで枠線を追加する方法

CSS border-image プロパティ

border- image 属性は、画像の境界線を設定するために使用され、すべての border-image-* 属性を設定する省略表現の属性です。値を省略した場合はデフォルト値が設定されます。

構文:

border-image: source slice width outset repeat|initial|inherit;

ログイン後にコピー

属性値:

border-image-source: 描画に使用される画像の場所を指定するために使用されます。 border
border-image-slice: 画像の境界線は内側にオフセットされます
border-image-width: 画像の境界線の幅
border-image-outset: 境界線の外側に描画される border-image-area の量を指定するために使用されます
border-image-repeat:画像の境界線を繰り返すか、伸ばすか、丸くするかを設定するために使用されます。

border-imageの便利さ

border-imageを使う前は、基本的にcssのプロパティだけで十分だと感じていましたが、border-imageは単純な作業を完全に煩雑にしてしまいます。この属性を学習した後、この属性を使用するとコーディング時間と効率が大幅に節約できることがわかりました。要約すると、この属性は次の 2 つのシナリオに大まかに適用できます:

要素の境界線が不規則である。このとき、デザイン画をボーダー背景として使用する必要があります。ボーダーイメージは、背景イメージに比べて柔軟性が高いという利点があります。ボーダー背景の伸縮や繰り返しをコードで制御できるため、

ボタンの幅と高さは不明です。 border-image を使用してボタンを作成する同じ背景画像を使用して、さまざまな幅と高さのボタンを作成できます。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> 
#borderimg1 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round;
}
#borderimg2 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>
<p>border-image 属性用于指定一个元素的边框图像。</p>
<p id="borderimg1">在这里，图像平铺（重复），以填补该地区。</p>
<p id="borderimg2">在这里，图像被拉伸以填补该地区</p>
<p>这是原始图片:</p><img  src="/images/border.png" alt="CSSで枠線を追加する方法" >
</body>
</html>

ログイン後にコピー

効果

CSSで枠線を追加する方法