多くの友達は画像を表示する方法だけを知っていますが、CSSスタイルのレイアウトを使用して円形の画像を実現する方法を知りません。そこで、今日はCSSを使用して円形の画像を表示する方法を教えます
まず、画像は正方形である必要があります。
レイアウト技術の使用
CSS3の角丸技術を使用して実現します。
CSS3 スタイルの単語を使用します: border-radius
構文:
div{border-radius:5px}画像の角丸スタイルを設定します:
.abc img{border-radius:5px}
class="abc" を設定します オブジェクト Four写真 角丸は5pxです
円形の画像を実現するCSSの角丸の例
まず、正方形の画像をDIVボックスに配置し、ボックス内の画像にborder-radius:50%を設定することで円形の効果を実現します。
1. 完全な HTML ソース コード:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片圆形布局 在线演示</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="div"><img src="images/1.jpg" /></div> </body> </html>
2. 対応する CSS コード:
#div{ margin:10px auto}
#div img{ border-radius:50%}CSS スタイルのレイアウトを使用して円形の画像を作成する方法はたくさんあります。さらにエキサイティングなコンテンツについては、php 中国語 Web サイトその他の関連記事に注目してください。
関連書籍:
以上がCSS3で円形の画像を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
