ホームページ >ウェブフロントエンド >CSSチュートリアル >画像のランダムな角丸スタイルを CSS で制御するにはどうすればよいですか? （例）
画像のランダムな角丸スタイルを CSS で制御するにはどうすればよいですか? （例）
- 藏色散人オリジナル
- 2018-08-14 10:59:202679ブラウズ
この記事では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>効果は次のとおりです:
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>効果は以下のとおりです:
関係する重要な属性は、この属性を使用して画像の角を丸くすることができます。
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を使った画像の角丸化の紹介です。困っている友人たちの手助けになれば幸いです。
【おすすめ関連記事】
HTML5 Canvasを使って角丸長方形を描画する方法と関連応用例_ HTML5チュートリアルスキル
CSS3の角丸、ボックスシャドウ、枠線画像について詳しく解説
以上が画像のランダムな角丸スタイルを CSS で制御するにはどうすればよいですか? （例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。