CSS3でbackground-clipプロパティを使用する方法-CSSチュートリアル-php.cn

CSS3でbackground-clipプロパティを使用する方法

青灯夜游

リリース： 2020-09-14 15:20:34

オリジナル

3769 人が閲覧しました

CSS3 での background-clip 属性の使用: [background-clip:border-box|padding-box|content-box]。背景の描画領域を指定するにはbackground-clip属性を使用します。

CSS3でbackground-clipプロパティを使用する方法

CSS 背景クリッププロパティ

関数: 要件背景の描画領域。

(推奨チュートリアル:

CSS チュートリアル)

構文:

background-clip: border-box|padding-box|content-box;

ログイン後にコピー

属性値:

● 境界ボックス: 背景は境界ボックス、つまり境界内の領域まで切り取られます。

#●パディングボックス: 背景はパディングボックス、つまりパディング内の領域まで切り取られます。

# コンテンツボックス: 背景がコンテンツボックス、つまりコンテンツ内の領域まで切り取られます。

注:

Internet Explorer 8 以前のバージョンは、background-clip 属性をサポートしていません。

#CSS 背景クリッププロパティの使用例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}
</style>
</head>
<body>

<div>
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>

</body>
</html>

ログイン後にコピー

レンダリング:

以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。！！
以上がCSS3でbackground-clipプロパティを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。