ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLで境界線の角丸を設定する方法
HTMLで境界線の角丸を設定する方法
- 青灯夜游オリジナル
- 2021-12-14 14:37:2949557ブラウズ
設定方法: 1. border-radius 属性を使用します。構文 "border-radius: fillet radius;"; 2. border-image 属性を使用して、角が丸い図の境界線を作成します。構文「border-image:url(四捨五入画像アドレス) 20 fill;」。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
#html境界線の角を丸く設定する
1. border-radius 属性を使用します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 300px;
border-radius: 25px;
}
</style>
</head>
<body>
<div>border-radius 属性为元素添加圆角边框！ </div>
</body>
</html>
角の丸い画像を使用して境界線を作成します
例:
画像の使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.border_image{
width:100px;
border:double gray 10px;
border-image:url(https://img.php.cn/upload/article/000/000/024/61b839d3982fc635.png) 20 fill;
text-align:center;
color:white;
}
</style>
</head>
<body>
<div class="border_image">1</div>
</body>
</html>
推奨チュートリアル: 「
以上がHTMLで境界線の角丸を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。