ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 の新しい境界線属性とは何ですか?

CSS3 の新しい境界線属性とは何ですか?

WBOY
WBOYオリジナル
2021-12-16 16:56:172765ブラウズ

css3 の新しい境界線属性: 1. 「border-image」、要素の境界線のスタイルを設定するために使用される短縮属性; 2. 「border-radius」、4 つの境界線を設定するために使用されます。要素の角 角丸スタイル; 3. 「box-shadow」、この属性は要素の 1 つ以上のドロップダウン シャドウ ボックスを設定するために使用されます。

CSS3 の新しい境界線属性とは何ですか?

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

css3 の新しい境界線属性とは何ですか

css3 の新しい境界線属性は、border-image、border-radius、および box です。 -shadow プロパティ。

##1. border-image

# border-image 属性は、次の属性を設定するために使用される短縮属性です:

CSS3 の新しい境界線属性とは何ですか?# 例は次のとおりです。

<html>
<head>
<style> 
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
#round
{
-moz-border-image:url(/i/border.png) 30 30 round;/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;/* Opera */
border-image:url(/i/border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch;/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;/* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">在这里,图片铺满整个边框。</div>
<br>
<div id="stretch">在这里,图片被拉伸以填充该区域。</div>
<p>这是我们使用的图片:</p>
<img  src="/i/border.png" alt="CSS3 の新しい境界線属性とは何ですか?" >
<p><b>注释:</b> Internet Explorer 不支持 border-image 属性。</p>
<p>border-image 属性规定了用作边框的图片。</p>
</body>
</html>

出力結果:

CSS3 の新しい境界線属性とは何ですか?

2、border-radius

border- radius 属性は、四隅の丸みのスタイルを設定するために使用される短縮属性です。構文は次のとおりです。

border-radius: 1-4 length|% / 1-4 length|%;

例は次のとおりです。

<html>
<head>
<style> 
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
</html>

出力結果:

CSS3 の新しい境界線属性とは何ですか?

3. box-shadow

box-shadow プロパティは、1 つ以上のドロップダウン シャドウ ボックスを設定できます。構文は次のとおりです。

box-shadow: h-shadow v-shadow blur spread color inset;

例は次のとおりです。

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

出力結果:

CSS3 の新しい境界線属性とは何ですか? (学習ビデオ共有:

CSS ビデオ チュートリアル

)

以上がCSS3 の新しい境界線属性とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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