ホームページ > 記事 > ウェブフロントエンド > CSSで枠線の角丸を設定する方法
CSSで枠線の角丸を設定する方法
- 青灯夜游オリジナル
- 2021-10-11 17:49:5625916ブラウズ
CSS では、border-radius 属性を使用して境界線の角丸を設定できます。この属性の機能は、境界線に角丸効果を追加することです。追加する必要があるのは、「border-radius:」だけです。要素に角丸半径値;"を設定します。スタイルでは、4つの境界線の角丸を同時に設定できます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
CSS で境界線の角丸を設定する最も一般的かつ簡単な方法は、border-radius 属性を使用することです。
CSS border-radius プロパティは、要素の角の半径を定義します。CSS border-radius プロパティを使用すると、要素の「角が丸い」スタイルを実現できます。
構文:
border-radius: none ｜ length{1,4} [/ length{1,4}各値は、数値またはパーセンテージの形式にすることができます。
長さ/長さ 最初の長さは水平方向の半径を表し、2 番目の長さは垂直方向の半径を表します。
値の場合、左上、右上、右下、左下の 4 つの値は等しいです。
値が 2 つある場合、左上と右下が等しく最初の値となり、右上と左下が等しく 2 番目の値になります。 
値が 3 つある場合、最初の値は左上に設定され、2 番目の値は右上と左下に設定され、それらは等しくなります。3 番目の値は次のようになります。右下に設定します。 
4 つの値がある場合、最初の値は左上に設定され、2 番目の値は右上に設定され、3 番目の値は右下に設定され、4 番目の値は右下に設定されます。値は左下に設定します。 
上記の省略形に加えて、次のように境界線のように四隅を分けて記述することもできます。 はそれぞれ水平方向と垂直方向の半径で、2 番目の値を省略した場合は水平方向と垂直方向の半径が等しくなります。
border-radius は、ブラウザのバージョン: Firefox4.0、Safari5.0、Google Chrome 10.0、Opera 10.5、および IE9 でのみ border-radius 標準構文形式をサポートします。古いブラウザの場合は、border-radius を次のバージョンにする必要があります。に基づいて、異なるブラウザ カーネルは異なるプレフィックスを追加します。たとえば、Mozilla カーネルは「-moz」を追加する必要があり、Webkit カーネルは「-webkit」を追加する必要があります。ただし、IE と Opera にはプライベート形式がないため、ブラウザの互換性を最大限に高めるために、次のように設定する必要があります:border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角
ブラウザのプライベート フォームの後に標準フォームを記述してください。
効果を確認するためにいくつかの例を示します:
-webkit-border-radius: 10px 20px 30px; -moz-border-radius: 10px 20px 30px; border-radius: 10px 20px 30px;
効果:
四隅の半径は 30px;
標準的な円と楕円をもう一度見てください:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
<style>
img {
border-radius: 30px;
margin: 100px;
}
</style>
</head>
<body>
<img src="../images/photo.jpg" style="max-width:90%" alt="CSSで枠線の角丸を設定する方法" >
</body>
</html>効果:
最初の p と 2 番目の p の違いは主に、それが正方形であるか長方形であるかにあります。 . サークルが入っています カルーセルする際に、サークルの絵の代わりに使用できます。 
上記は、水平方向と垂直方向の半径が等しい例です。次に、水平方向と垂直方向の半径が異なる 2 つの例を示します:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
<style>
p {
display: inline-block;
border: 10px solid red;
}
.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.elipse {
width: 50px;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
</style>
</head>
<body>
<p></p>
<p></p>
</body>
</html>効果は次のとおりです:
(学習ビデオ共有:
以上がCSSで枠線の角丸を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。