画像のランダムな角丸スタイルを CSS で制御するにはどうすればよいですか? （例）-CSSチュートリアル-php.cn

画像のランダムな角丸スタイルを CSS で制御するにはどうすればよいですか? （例）

藏色散人

リリース： 2018-08-14 10:59:20

オリジナル

2681 人が閲覧しました

この記事ではcssを使って画像に丸い枠を付ける方法を中心に紹介します。

1. CSS 画像の左側が丸くなります

コード例:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css图片左边变成圆角</title>
    <meta charset="UTF-8">
    <style type="text/css">
        .wrapper img {
            border-top-left-radius:2em;
            border-bottom-left-radius:2em;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <img  src="2.png" / alt="画像のランダムな角丸スタイルを CSS で制御するにはどうすればよいですか? （例）" >
</div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです:

画像のランダムな角丸スタイルを CSS で制御するにはどうすればよいですか? （例）

2. CSS 画像の境界線が丸くなります。表示

コード例:

<!DOCTYPE HTML>
<html>
<head>
    <title>css img 圆形角边示例</title>
    <meta charset="UTF-8">
    <style type="text/css">
        .wrapper{
            width: 200px;
            height: 100px;
            margin: 0 auto;
        }
        .wrapper img {
            border-radius:2em;
        }
    </style>
</head>
<body>
<div>
    <img  src="2.png" / alt="画像のランダムな角丸スタイルを CSS で制御するにはどうすればよいですか? （例）" >
</div>
</body>
</html>

ログイン後にコピー

効果は以下のとおりです:

画像のランダムな角丸スタイルを CSS で制御するにはどうすればよいですか? （例）

関係する重要な属性は、この属性を使用して画像の角を丸くすることができます。

border-radius の属性の具体的な機能は次のとおりです:

border-radius: 2em。これは、4 つの角すべてが丸く、各丸い角の半径が 2em であることを意味します。

border-radius:2em2em などの 2 つの値を設定できます。最初の値は左上の丸い角と右下の丸い角を表し、2 番目の値は右上の丸い角と左下の丸い角を表します。

border-radius などの 3 つの値を設定します: 2em 2em 2em; 最初の値は左上隅を表し、2 番目の値は右上隅と左下隅を表し、3 番目の値は右下隅を表します。

border-radius などの 4 つの値を設定します: 2em 2em 2em2em; 4 つの値はそれぞれ左上、右上、右下、左下を表します。

左上隅 (border-top-left-radius)、右上隅 (border-top-right-radius)、右下隅など、4 つの隅を 4 つの個別の属性に分割して設定することもできます。角 (border-bottom -right-radius) と左下の丸い角 (border-bottom-left-radius)。

以上は一定の参考価値のあるCSSを使った画像の角丸化の紹介です。困っている友人たちの手助けになれば幸いです。

【おすすめ関連記事】

phpで角丸画像コードを生成

div要素に丸い枠線を追加する方法

HTML5 Canvasを使って角丸長方形を描画する方法と関連応用例_ HTML5チュートリアルスキル

CSS3の角丸、ボックスシャドウ、枠線画像について詳しく解説

以上が画像のランダムな角丸スタイルを CSS で制御するにはどうすればよいですか? （例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。