ホームページ > 記事 > ウェブフロントエンド > CSSで画像の角を丸くする方法
CSSで画像の角を丸くする方法
- 藏色散人オリジナル
- 2020-12-18 09:21:276550ブラウズ
CSS を使用して画像に丸い角を実装する方法: 最初に HTML サンプル ファイルを作成し、次に div 要素を作成し、最後に css3 の「border-radius」属性を使用して要素に丸い角を追加します。
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
##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 結果
#次の効果を達成します:
<!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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。