CSSスタイルでボタンを丸くする方法-CSSチュートリアル-php.cn

CSSスタイルでボタンを丸くする方法

藏色散人

リリース： 2023-01-03 09:25:56

オリジナル

8496 人が閲覧しました

CSS スタイルを使用してボタンを丸くする方法: 最初に HTML サンプルファイルを作成し、次にボタンボタンを定義し、最後に「border-radius」属性を使用してボタンの四隅を丸く設定します。 css。

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 サイトの他の関連記事を参照してください。