ホームページ > 記事 > ウェブフロントエンド > CSSスタイルでボタンを丸くする方法
CSSスタイルでボタンを丸くする方法
- 藏色散人オリジナル
- 2021-02-28 10:17:288506ブラウズ
CSS スタイルを使用してボタンを丸くする方法: 最初に HTML サンプル ファイルを作成し、次にボタン ボタンを定義し、最後に「border-radius」属性を使用してボタンの四隅を丸く設定します。 css。
このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
ボタンを円に変える (ラジアン付き)
border-radius はボタンを円に変えるか、ラジアンの境界線を p
border-radius ルール:
1 つの値: 4 つの丸い角は同じ値を持つ
2 つの値: 最初の値は左上隅と下隅です。右隅、2 番目の値は右上隅と左下隅です。3 つの値: 最初の値は左上隅、2 番目の値は右上隅と左下隅、3 番目の値は下隅です
4 つの値: 最初の値は左上隅、2 番目の値は右上隅、3 番目の値は右下隅、4 番目の値は左下隅です。
スタイル:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.btn{
width: 100px;
height: 30px;
background: green;
border: none;
color: white;
margin: 6px 10px;
}
.btnStyle1{
border-radius: 6px;
}
.btnStyle2{
border-radius: 26px 6px;
}
.btnStyle3{
border-radius: 6px 26px 60px;
}
.btnStyle4{
border-radius: 6px 126px 236px 346px;
}
.bolder{
border: solid 1px green;
width: 500px;
height: 40px;
border-radius: 10px;
}
</style>
</head>
<body>
<p class="bolder">
<button class="btn btnStyle1">按钮1</button>
<button class="btn btnStyle2">按钮2</button>
<button class="btn btnStyle3">按钮3</button>
<button class="btn btnStyle4">按钮4</button>
</p>
</body>
</html>
境界半径が失敗する場合があります
解決策: ユニバーサル !重要;
border-radius 属性に
! important を追加して、ブラウザが最初にこのステートメントを実行できるようにします CSS の border-radius: 6px !important;
!! important は通常、 iE 6 を除く下位バージョンでのハッキングに使用されます。CSS はスタイルを継承しているため、ブラウザーが最初にこのステートメントを実行できるようにするために、!importanrt ステートメントが続き、!importanrt を追加すると、親のスタイルをオーバーライドできます。
推奨: 「
HTML ビデオ チュートリアル以上がCSSスタイルでボタンを丸くする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。