CSS を使用して丸いボタン効果を作成する方法を段階的に説明します (詳細なコードの説明)-htmlチュートリアル-php.cn

CSS を使用して丸いボタン効果を作成する方法を段階的に説明します (詳細なコードの説明)

奋力向前

リリース： 2021-08-18 17:55:19

オリジナル

4523 人が閲覧しました

前回の記事「html記事：Webページでインプットボックス効果を実現する方法（詳細コード解説）」では、htmlを使ってインプットボックス効果を実現する方法を紹介しました。。次の記事では、CSS を使用して丸いボタン効果を作成する方法を紹介しますので、一緒に見てみましょう。

CSS を使用して丸いボタン効果を作成する方法を段階的に説明します (詳細なコードの説明)

#htmlWeb ページに丸いボタンを作成する方法

1. まず、新しい html ファイルを作成します。 # まず ##body に a タグを入力し、空のリンクを挿入します。 Button にインラインスタイルを導入するコードを title に挿入します。 < ;style type="text/css">。

#コード例

<!DOCTYPE html>
<html>
<head>
<title>...</title>
<style type="text/css">
 
</style>
</head>
<body>
    <a href="#">按钮</a>
</body>
</html>

ログイン後にコピー

コードの効果

CSS を使用して丸いボタン効果を作成する方法を段階的に説明します (詳細なコードの説明) 2. 追加a タグに CSS スタイルを追加し、[

btn-style

] という名前を付け、幅、高さ、背景色、フォント色を定義し、ボタンの下線を削除します。 disply:block を追加すると、定義されたボタンの幅と高さが有効になりません。次に、#btn-style スタイルを a タグに導入します。 コード例

<style type="text/css">
           .btn-style{
                width: 150px;
                height: 50px;
                color: #f8ff00;
                background:#010dfb;
                text-decoration: none;
                display: block;
           }
</style>
</head>
<body>
    <a href="#">按钮</a>
</body>

ログイン後にコピー

コードの効果

3. 引き続きスタイルを追加します。 , ボタンのフォントの水平方向の中心、垂直方向の中心、フォント、およびフォントサイズを定義します。 CSS を使用して丸いボタン効果を作成する方法を段階的に説明します (詳細なコードの説明)

コード例

line-height: 50px;
text-align: center;
font-size:"微软雅黑"；

ログイン後にコピー

コードの効果

4. 角を次のように設定します。ボタンのように見えるように丸くします。 CSS を使用して丸いボタン効果を作成する方法を段階的に説明します (詳細なコードの説明)

border-radius: 100px;

ログイン後にコピー

コードエフェクト

これでエフェクトは完成です。 CSS を使用して丸いボタン効果を作成する方法を段階的に説明します (詳細なコードの説明)

border-radius は単なる角丸だと思いますか?実際には、境界線が配置される円の半径を指すものではありません。border-radius 属性パラメーターについて詳しく説明します。

属性値の単位は em、px、パーセントなどを使用できます。

試してみて、border-radius: 100px を 10px

border-radius: 10px

ログイン後にコピー

に変更してみてください。コードの効果

要素の丸い角の「水平半径」と「垂直半径」は 10px に設定されます。 CSS を使用して丸いボタン効果を作成する方法を段階的に説明します (詳細なコードの説明)

border-radius は同時に 1 ～ 4 つの値を設定できます。4 つの値を設定した場合、左上隅、右上隅に対応します。、右下隅、および左下隅。 CSS を使用して丸いボタン効果を作成する方法を段階的に説明します (詳細なコードの説明)

border-radius: 10px 20px 0px 30px;

ログイン後にコピー

コードの効果

推奨学習: CSS を使用して丸いボタン効果を作成する方法を段階的に説明します (詳細なコードの説明) HTML ビデオチュートリアル

以上がCSS を使用して丸いボタン効果を作成する方法を段階的に説明します (詳細なコードの説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。