ホームページ > 記事 > ウェブフロントエンド > CSS3 の新しい境界線属性とは何ですか?
CSS3 の新しい境界線属性とは何ですか?
- WBOYオリジナル
- 2021-12-16 16:56:172721ブラウズ
css3 の新しい境界線属性: 1. 「border-image」、要素の境界線のスタイルを設定するために使用される短縮属性; 2. 「border-radius」、4 つの境界線を設定するために使用されます。要素の角 角丸スタイル; 3. 「box-shadow」、この属性は要素の 1 つ以上のドロップダウン シャドウ ボックスを設定するために使用されます。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css3 の新しい境界線属性とは何ですか
css3 の新しい境界線属性は、border-image、border-radius、および box です。 -shadow プロパティ。
##1. border-image
# border-image 属性は、次の属性を設定するために使用される短縮属性です: 
# 例は次のとおりです。
<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>出力結果:
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>出力結果:
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 の新しい境界線属性とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。