CSS画像を丸くする方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS画像を丸くする方法

青灯夜游

Jul 21, 2021 pm 04:55 PM

css写真丸い角

CSS では、border-radius 属性を使用して画像を丸くすることができ、img 要素に「border-radius: 50%;」スタイルを追加するだけです。 border-radius 属性は、要素に丸い境界線を設定できます。丸い角の半径は、幅/高さの半分を超えることはできません。

CSS画像を丸くする方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS では、border-radius 属性を使用して画像を丸くすることができます。

コード例を詳しく見てみましょう:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			img{
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%"/ alt="CSS画像を丸くする方法" >

	</body>
</html>

レンダリング:

CSS画像を丸くする方法

説明:

border-radius 属性は、要素の丸い境界線を設定するために使用されます。値 1 ～ 4 を指定すると、境界線に (1 ～ 4) 個の丸い角を作成できます。半径は丸い角は幅/高さの半分を超えることはできません。

構文:

border-radius: 1-4 length|%

値:

length 曲線の形状を定義します。
% % を使用して角の形状を定義します。

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

4 つの値: 最初の値は左上隅、2 番目の値は右上隅、3 番目の値は右下隅、4 番目の値は左下隅です。コーナー。

border-radius: 15px 50px 30px 5px
##3 つの値: 最初最初の値は左上隅、2 番目の値は右上隅と左下隅、3 番目の値は右下隅です。
#border-radius: 15px 50px 30px
境界線半径: 15px 50px
border-radius: 25px

css ビデオチュートリアル＃＃＃）＃＃＃

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

擬似要素は子供であることを少し思い出させてください。Apr 19, 2025 am 11:39 AM

ここに＆＃039;いくつかの子供の要素を持つ容器があります：

「ダイナミックヒットエリア」のメニューApr 19, 2025 am 11:37 AM

フライアウトメニュー！ Hoverイベントを使用してメニュー項目をより多く表示するメニューを実装する必要がある2番目の場合は、トリッキーな領域にあります。 1つは、そうすべきです

WebVTTを使用したビデオアクセシビリティの改善Apr 19, 2025 am 11:27 AM

「Webの力はその普遍性にあります。障害に関係なくすべての人からのアクセスは重要な側面です。」

毎週のプラットフォームニュース：CSS ::マーカー擬似エレメント、事前レンダリングWebコンポーネント、サイトへのウェブメントの追加Apr 19, 2025 am 11:25 AM

今週、＃039;のラウンドアップ：DatePickersはキーボードユーザーのHeadachesを提供しています。これは、Foucとの戦いに役立つ新しいWebコンポーネントコンパイラであり、最終的にスタイリングリストのアイテムマーカーと、サイトでWebメントを取得するための4つのステップを手に入れます。

幅と柔軟なアイテムを作ることは、一緒にうまく機能しますApr 19, 2025 am 11:23 AM

簡単な答え：フレックスシュリンクとフレックスベイズは、おそらくあなたが探しているものです。

スティッキーヘッダーとテーブルヘッダーを位置付けますApr 19, 2025 am 11:21 AM

＆＃039; t position：sticky; a

毎週のプラットフォームニュース：検索コンソールでのHTML検査、スクリプトのグローバル範囲、Babel Envがデフォルトクエリを追加するApr 19, 2025 am 11:18 AM

今週のWebプラットフォームニュースの世界を見回すと、Google Searchコンソールによりクロールされたマークアップの表示が簡単になります。

indiebebとウェブメントApr 19, 2025 am 11:16 AM

indiewebは何かです！彼らは会議が近づいてきました。ニューヨーカーはそれについても書いています：

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。