コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS半透明ボーダーの実装例を詳しく解説（写真）

CSS半透明ボーダーの実装例を詳しく解説（写真）

PHPz
リリース： 2017-04-23 10:28:46
オリジナル
2695 人が閲覧しました

CSS半透明ボーダーの詳細な実装例(写真)

1.半透明ボーダー

質問:

コンテナに赤い背景と黒い半透明ボーダーを設定したい場合は、次のように書きます: 

border: 20px solid rgba(0,0,0,0.5);
background: red;
ログイン後にコピー

しかし、効果は次のようになります (図 1-1.png); なぜ、私たちの 半透明色 は半透明の境界線を実装していないのでしょうか?

CSS半透明ボーダーの実装例を詳しく解説（写真）

図 1-1.png

解決策:

上記のデフォルトの動作は、background-clipプロパティを使用して調整し、その値をpaddingボックスに設定して、その効果を調整できます。 want が表示されます (図 1-2.png); 

border: 20px solid rgba(0,0,0,0.5);
background: red;
background-clip: padding-box;
ログイン後にコピー

CSS半透明ボーダーの実装例を詳しく解説（写真）

Figure 1-2.png

2.background-clip

では、background-clip 属性を使用します。この属性を見てください;

background-clip:

要素の背景 (背景 画像 または色) が境界線の下に広がるかどうかを設定します。 U 値

Border-box デフォルトの初期値 、背景は境界線の外縁 (ただしフレームの下) まで拡張されます 背景はありません境界線の下、つまり、背景は内マージン外縁背景はコンテンツ領域(content-box)の外縁までトリミングされますtextexperimentAPI では、背景が前景テキストにトリミングされます。
Padding-box
content-box

示例

CSS content

span {
   border: 10px blue;
   border-style: dotted double;
   margin: 1em;
   padding: 2em;
   background: #F8D575;
}
.border-box { background-clip: border-box; }
.padding-box { background-clip: padding-box; }
.content-box { background-clip: content-box; }
.text { background-clip: text; }
ログイン後にコピー

 

HTML content

<span class="border-box">border-box</span>
<span class="padding-box">padding-box</span>
<span class="content-box">content-box</span>
<span class="text">text</span>
ログイン後にコピー

 

效果：（图2-1.png）

CSS半透明ボーダーの実装例を詳しく解説（写真）

图2-1.png

3.border-style

CSS半透明ボーダーの実装例を詳しく解説（写真）

CSS半透明ボーダーの実装例を詳しく解説（写真）

4.border-image

初始值：

  • border-image-source: none

  • border-image-slice: 100%

  • border-image-width: 1

  • border-image-outset: 0s

  • border-image-repeat: stretch

4.1 border-image-source: none |

where

= | | | | |

where

= image([ [ | ]? , ? ]!)
= image-set(#)
= element( )
= cross-fade(,?)
= | | |

Gradient示例：

= linear-gradient( [ | to ]?, )

CSS content

.gradient { 
    border: 30px solid;
    border-image-source: linear-gradient(to right, red, green, blue);
    /*border-image-source: linear-gradient(90deg, red, green, blue);*/
    border-image-slice: 10;
    padding: 20px;
}
ログイン後にコピー

 

HTML content

<p class="gradient">The image is stretched to fill the area.</p>
ログイン後にコピー

 

效果：（图4-1.png）

CSS半透明ボーダーの実装例を詳しく解説（写真）

图4-1.png

4.2 border-image-slice: [ | ]{1,4}&& fill?

这个 border-imge-slice 属性传入1~4个参数（number没有单位专指像素或百分比值）将图片分割成9个部分,1,2,3,4四个区块是不会拉伸,不会平铺，称之为盲区，5,6,7,8四个区块可以通过 border-image-repeat 来控制拉伸平铺和重复（ stretch:默认值,拉伸; repeat:平铺; round:整数次平铺; ），第9区块不显示，传入参数 fill 则显示第9区块，分割情况如下图（图4-2.png && 图2-3.png）:

CSS半透明ボーダーの実装例を詳しく解説（写真）

图4-2.png

CSS半透明ボーダーの実装例を詳しく解説（写真）

图4-3.png

我们通过上面这张图片（81px^81px）来看传入不同个数的参数是如何分割这张图片的；

1个参数

/* border-image-slice: slice */
border-image-slice: 27; 
border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
ログイン後にコピー

 

CSS半透明ボーダーの実装例を詳しく解説（写真）

图4-4.png

CSS半透明ボーダーの実装例を詳しく解説（写真）

图4-5.png(效果图)

2个参数（参考图4-3.png）

/* border-image-slice: vertical horizontal */
border-image-slice: 40 40.5; 
border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
ログイン後にコピー

 

CSS半透明ボーダーの実装例を詳しく解説（写真）

图4-6.png

CSS半透明ボーダーの実装例を詳しく解説（写真）

图4-7.png(效果图)

3个参数

/* border-image-slice: top horizontal bottom */
border-image-slice: 27 40 27; 
border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
ログイン後にコピー

 

CSS半透明ボーダーの実装例を詳しく解説（写真）

图4-8.png（效果图）

4个参数(参考图4-2.png)

/* border-image-slice: top right bottom left */
border-image-slice: 27 40 27 27;
border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
ログイン後にコピー

 

CSS半透明ボーダーの実装例を詳しく解説（写真）

图4-9.png（效果图）

4.3 border-image-width: [ | | | auto ]{1,4}

语法：

border-image-width: all                        /* One-value syntax */       
E.g. border-image-width: 3;
border-image-width: vertical horizontal        /* Two-value syntax */  
E.g. border-image-width: 2em 3em;
border-image-width: top horizontal bottom      /* Three-value syntax */    
E.g. border-image-width: 5% 15% 10%;
border-image-width: top right bottom left      /* Four-value syntax */  
E.g. border-image-width: 5% 2em 10% auto;
ログイン後にコピー

 

设置边框图片的width，如果超出了设置的border-width,会向内扩展；查看下方示例，比较（图4-10.png && 图4-11.png）；

示例：

border: 30px solid transparent;
padding: 20px;
border-image-source: url("https://mdn.mozillademos.org/files/4127/border.png");
border-image-slice: 27;
ログイン後にコピー

 

CSS半透明ボーダーの実装例を詳しく解説（写真）

图4-10.png

border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
border-image-slice: 27;
border-image-width: 1 2 1 1;
ログイン後にコピー

 

CSS半透明ボーダーの実装例を詳しく解説（写真）

图4-11.png

4.4 border-image-outset: [ | ]{1,4}

语法：

/* border-image-outset: sides */
border-image-outset: 30%;
/* border-image-outset:vertical horizontal */
border-image-outset: 10% 30%;
/* border-image-outset: top horizontal bottom */
border-image-outset: 30px 30% 45px;
/* border-image-outset:top right bottom left  */
border-image-outset: 7px 12px 14px 5px;
ログイン後にコピー

 

效果是将边框图片延伸到盒子外面，查看下放示例，比较（图4-12.png && 图4-13.png）；

示例:

border: 30px solid transparent;
 padding: 20px;
 border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
 border-image-slice: 27;
 margin: 60px;
ログイン後にコピー

 

CSS半透明ボーダーの実装例を詳しく解説（写真）

图4-12.png

border: 30px solid transparent;
padding: 20px;
border-image-source:url([https://mdn.mozillademos.org/files/4127/border.png](https://mdn.mozillademos.org/files/4127/border.png));
border-image-slice: 27;
margin: 60px;
border-image-outset: 2 1 1 1;
ログイン後にコピー

 

CSS半透明ボーダーの実装例を詳しく解説（写真）

图4-13.png

4.4 border-image-repeat: [ stretch | repeat | round ]{1,2}

值（value） 说明
stretch 默认初始值 ，；拉伸
repeat 平铺
round 整数次平铺

语法：

border-image-repeat: type                      /* One-value syntax */       
E.g. border-image-value: stretch;
border-image-repeat: horizontal vertical       /* Two-value syntax */       
E.g. border-image-width: round space;
ログイン後にコピー

 

以上がCSS半透明ボーダーの実装例を詳しく解説（写真）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css
ソース：php.cn
前の記事：CSSを使って写真の虫眼鏡効果を実現する例を詳しく解説（写真） 次の記事：CSSで水平方向の中央揃え/垂直方向の中央揃えを実現するいくつかの方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート