CSS 円形ホローイングの実装(クーポン背景画像)

CSS 円形ホローイングの実装(クーポン背景画像)

この記事では主に、クーポンの背景画像などでよく使われる CSS 円形ホローイングについて紹介し、皆さんと共有します。詳細は次のとおりです。

.hollow-compose-three-circles {
  幅: 300ピクセル;
  高さ: 100px;
  位置: 相対的;
  背景: 放射状グラデーション(右上の円、透明 10px、#00adb5 0) 左上 / 60px 51% 繰り返しなし、
    放射状グラデーション(右下の円、透明 10px、#00adb5 0) 左下 /60px 51% 繰り返しなし、
    放射状グラデーション(左上の円、透明 10px、#eeeeee 0) 60px 0/230px 51% 繰り返しなし、
    放射状グラデーション(左下の円、透明10px、#eeeeee 0) 60px 50px /230px 51% 繰り返しなし、
    放射状グラデーション(10px 50pxの円、透明10px、#eeeeee 0) 290px 0/10px 100px 繰り返しなし;
   フィルター: ドロップシャドウ(2px 2px 2px rgba(0,0,0,.2));
}

.hollow-compose-three-circles::after {
  コンテンツ: '';
  高さ: 80px;
  境界線: 1px 破線 #fff;
  位置: 絶対;
  左: 60px;
  上: 0;
  下部: 0;
  マージン: 自動;
}
<div class="hollow-compose-three-circles"></div>

レンダリング

<!doctypehtml>
<ヘッド>
<メタ文字セット="UTF-8">
<title>プロセス</title>
<スタイル>
	体{
		背景: グレー;
	}
   .many-circles {
      マージン: 10px 0 0 40px;
	    幅: 200ピクセル;
	    高さ: 100px;
	   背景: 放射状グラデーション(右の円、透明 10px、#00adb5 0) 右上 / 51% 60px 繰り返しなし、
	    放射状グラデーション(左の円、透明 10px、#00adb5 0) 左上 / 51% 60px 繰り返しなし;
	    /*radial-gradient(右上の円、透明 10px、#eeeeee 0) 右下 / 51% 40px 繰り返しなし、
	    放射状グラデーション(左上に円、透明 10px、#eeeeee 0) 左下 / 51% 40px no-repeat;*/
	   フィルター: ドロップシャドウ(2px 2px 2px rgba(0,0,0,.2));
}

</スタイル>
</head>
<本文>
	
 <div data-v-85036100="" class="many-circles"></div>
<スクリプト>
</スクリプト>
</本文>
</html>

効果は以下のとおりです

ここに画像の説明を挿入

<スタイル>
	体{
		背景: グレー;
	}
	
   .hollow-one-circle{
		表示: インラインブロック;
	  幅: 246ピクセル;
	  高さ: 218px;
	  位置: 相対的;
	  背景: 放射状グラデーション(0 106px の円、透明 10px、#FF4654 0) 左上/246px 100% 繰り返しなし;  
	}
	.hollow-one-right{
		表示: インラインブロック;
		幅: 718ピクセル;
		  高さ: 218px;
		  位置: 相対的;
		背景: 放射状グラデーション(718px×106pxの円、透明10px、#ffffff 0) 左上/718px 100% 繰り返しなし;
		
ボックスの影:3px 0px 13px 0px rgba(0,0,0,0.03);
	}

.hollow-one-circle::before {
  コンテンツ: '';
  位置: 絶対;
  高さ: 100%;
  幅:5px;
  上: 4px;
  左: 246ピクセル;
  背景画像: 線形グラデーション(下へ、#FF4654 5px、透明 5px、透明)、
  放射状グラデーション(5px 10px の円、透明 5px、#FF4654 5px);
  背景サイズ: 5px 15px;
}
.hollow-one-circle:after {
  
}
</スタイル>
<div data-v-85036100="" class="hollow-one-circle"></div>
<div data-v-85036100="" class="hollow-one-right"></div>

効果は以下のとおりです

CSS 円形ホローイング(クーポンの背景画像などによく使われる)に関する記事はこれで終わりです。CSS 円形ホローイングに関するより詳しい内容は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  フレームセットを使用して複雑なページレイアウトを実装するためのテクニックの概要

>>:  MySQL よく使われる関数の詳細な概要

推薦する

Windows で Mysql を起動したときに 1067 が表示される場合の解決策

数日前に仕事を始めて、Mysql をインストールしたところ、開くことができました。今日、会社に行った...

Flutterを使用して移動可能なスタックウィジェット機能を作成する

この投稿では、キャンバスとドラッグ可能なノード インターフェースを使用するデスクトップおよび Web...

トップ 10 Js 画像処理ライブラリ

目次導入1. 異食症2. レナ3. コンプレッサー4. ファブリック5. ぼかす6. 画像を結合する...

HTML/XHTML における img 画像タグの基本的な使用法の詳細な説明

画像タグは、Web ページに画像を表示するために使用されます。 HTML/XHTML 画像 <...

Linux で rc.local ファイルがない場合の完璧なソリューション

新しい Linux ディストリビューションには rc.local ファイルがなくなりました。サービス...

Tomcat Nginx Redis セッション共有プロセス図

1. 準備ミドルウェア: Tomcat、Redis、Nginx Jar パッケージ: commons...

MySQLのユーザー権限の確認と管理方法の詳細な説明

この記事では、例を使用して、MySQL ユーザー権限を確認および管理する方法を説明します。ご参考まで...

Windows サーバー ファイルをローカルにバックアップする方法、Windows サーバー データ バックアップ ソリューション

重要なデータはバックアップする必要があり、リアルタイムでバックアップする必要があります。そうしないと...

ページキャッシュを無効にするいくつかの方法を共有する

本日、開発中に、顧客からページをキャッシュしないように要求される方法に遭遇しました。調べたところ、ペ...

Vue+SpringBoot のフロントエンドとバックエンドの分離におけるクロスドメインの問題

フロントエンドとバックエンドを分離した開発では、フロントエンドがバックエンドの API を呼び出して...

Docker で Rancher をデプロイする方法 (落とし穴なし)

操作前に必ずお読みください:注意:管理に rancher を使用する場合は、k8s クラスターが構築...

WindowsにJDK8をインストールする方法

1. ダウンロード: http://www.oracle.com/technetwork/java/...

ネイティブ JavaScript 継承方法とその長所と短所の詳細な説明

目次序文プロトタイプ継承アドバンテージ欠点コンストラクタの継承アドバンテージ欠点組み合わせ継承寄生的...

JavaScriptの知識ポイントの詳しい説明

目次1. JavaScriptの基礎2. 基本的なJavaScript構文3. JavaScript...

MySQL遅延レプリケーションライブラリ方式の詳細な説明

簡単に言えば、遅延レプリケーションとは、スレーブ データベースがマスター データベースより 1 時間...