CSS3で円形の画像を表示する方法-htmlチュートリアル-php.cn

CSS3で円形の画像を表示する方法

php中世界最好的语言

リリース： 2017-11-22 16:23:27

オリジナル

5377 人が閲覧しました

多くの友達は画像を表示する方法だけを知っていますが、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 サイトその他の関連記事に注目してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSS3で円形の画像を表示する方法