CSSで画像の角を丸くする方法-CSSチュートリアル-php.cn

CSSで画像の角を丸くする方法

藏色散人

リリース： 2023-01-04 09:37:37

オリジナル

6684 人が閲覧しました

CSS を使用して画像に丸い角を実装する方法: 最初に HTML サンプルファイルを作成し、次に div 要素を作成し、最後に css3 の「border-radius」属性を使用して要素に丸い角を追加します。

CSSで画像の角を丸くする方法

#このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨: 「

css ビデオチュートリアル」

CSS 角丸

css2.1 円を追加するan 要素コーナーは非常に面倒なもので、従来の方法では背景画像を使用していましたが、作成するのがさらに面倒でした。 css3 では、border-radius 属性により、角丸属性を完全に解決できます。

構文

border-radius: 長さの値;

説明:

長さの値は、px、パーセント、em などです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圆角实现</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 50px;
            border-radius: 10px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div></div>
    
</body>
</html>

ログイン後にコピー

Set border-radius:10px; 設定された 4 つの角の半径はすべて 10px

CSSで画像の角を丸くする方法 ##border-radius 属性値を記述する方法は 4 つあります (margin とpadding)

(1) border-radius: 1 つの値;

結果は上に示すとおりです

#(2) border-radius: 2 つの値;

例: border -radius:10px 20px; は、左上隅と右下隅が 10 ピクセル、右上隅と左下隅が 20 ピクセルであることを意味します。

# (3) border- radius: 3 つの値を設定します;

例: border-radius:10px 20px 30px; は、左上隅、右上隅、下隅の半径を意味します左隅、左下隅は順に 10px、20px、30px

結果

CSSで画像の角を丸くする方法

(4) border-radius: 4 つの値を設定します

例: border-radius:10px 20px 30px 40px; は左上隅を意味し、右上隅、右下隅、および左下隅の丸み半径は 10px 20px 30px 40px

結果

CSSで画像の角を丸くする方法

#次の効果を達成します:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圆角实现</title>
    <style type="text/css">
        img{
            width: 300px;
            border-radius:80% 90% 100% 20%;
        }
    </style>
</head>
<body>
    <img  src="1.jpg" / alt="CSSで画像の角を丸くする方法" >
    
</body>
</html>

ログイン後にコピー

以上がCSSで画像の角を丸くする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。