CSSで画像を円形の画像に設定する方法

王林
リリース: 2023-01-03 09:26:25
オリジナル
11210 人が閲覧しました

CSS で円形の図を設定する方法: [border-radius:50%] などのコードで、border-radius 属性を使用して円形の図を設定できます。 border-radius プロパティを使用すると、要素に丸い境界線を追加できます。

CSSで画像を円形の画像に設定する方法

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

属性の紹介:

border-radius 属性を使用すると、要素に丸い境界線を追加できます。

構文:

border-radius: 1-4 length|% / 1-4 length|%;
ログイン後にコピー

注: 各半径の 4 つの値の順序は、左上隅、右上隅、右下隅、左下隅です。左下隅を省略した場合は、右上隅も同じになります。右下隅を省略した場合は、左上隅も同じになります。右上を省略した場合は左上と同じになります。

属性値:

  • length は曲線の形状を定義します。

  • % % を使用して角の形状を定義します。

具体的な実装コードは次のとおりです:

(学習ビデオ共有:

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

style{ .circle{ width:120px; height:120px; border-radius:50%; overflow:hidden; } .circle > img{ width: 100%; height: 100%; } } 
正方形的原始图片
ログイン後にコピー

関連する推奨事項:

CSStutorial

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

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!