効果原理 主にCSSグラデーションを使用して、切り取りを必要としない背景のくり抜きを実現します。 クーポンスタイル .mixinsTicket(@width, @height, @r, @left, @lcolor, @rcolor) { 幅: @width; 高さ: @height; 背景: 放射状グラデーション(右上の円、透明@r、@lcolor 0) -(@width - @left) 上部 ~'/' 100% 51% 繰り返しなし、 放射状グラデーション(右下の円、透明@r、@lcolor 0) -(@width - @left) 下 ~'/' 100% 51% 繰り返しなし、 放射状グラデーション(左上の円、透明@r、@rcolor 0) @left 0 ~'/' 100% 51% 繰り返しなし、 放射状グラデーション(左下の円、透明@r、@rcolor 0) @left bottom ~'/' 100% 51% no-repeat; } .mixinsTicket1(@width, @height, @r, @top, @color) { 幅: @width; 高さ: @height; 背景: 放射状グラデーション(左下の円、透明@r、@color 0) 左 (@top - @height) ~'/' 51% 100% 繰り返しなし、 放射状グラデーション(左上の円、透明@r、@color 0) 左 @top ~'/' 51% 100% 繰り返しなし、 放射状グラデーション(右下の円、透明@r、@color 0) 右 (@top - @height) ~'/' 51% 100% 繰り返しなし、 放射状グラデーション(右上の円、透明@r、@color 0) 右 @top ~'/' 51% 100% 繰り返しなし; &::後{ コンテンツ: ''; 表示: ブロック; 位置: 絶対; 幅: calc(100% - 2 * @r); 左: @r; トップ: @top; border-top: 1px 破線 #fff; 変換: translateY(.5); } } カットアウェイ効果 ps: 鋸歯状波はデバイスのディスプレイに関連しています .mixinFlag(@width, @height, @bg) の場合(default()) { 幅: @width; 高さ: @height; 背景: 線形グラデーション(45度、透明 sqrt(pow(@width/2, 2)/2)、@bg 0) 右、 linear-gradient(-45度、透明、sqrt(pow(@width/2, 2)/2)、@bg 0) 左; 背景サイズ: 50% 100%; 背景繰り返し: 繰り返しなし; } .mixinFlag(@width, @height, @bg) の場合(@width > @height) { 幅: @width; 高さ: @height; 背景: linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) 左上、 linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) 左下; 背景サイズ: 100% 50%; 背景繰り返し: 繰り返しなし; } .mixinsMark(@width, @height, @bg) { 幅: @width; 高さ: @height; 背景: linear-gradient(-45deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) 左下、 linear-gradient(-135deg, transparent sqrt(pow(@height/2, 2)/2), @bg 0) 左上; 背景サイズ: 100% 50%; 背景繰り返し: 繰り返しなし; } 追記:上記の効果は4方向で達成できます。他の方向のコードは掲載されていませんが、原理は同じです。 チェック柄 css { 幅: 510ピクセル; 高さ: 128px; 背景: #FFF; 背景画像: 線形グラデーション(rgba(182, 128, 102, .8) 8px, 透明 0), 線形グラデーション(90度、rgba(182, 128, 102, .8) 8px、透明0); 背景サイズ: 8px 14px、14px 8px; } 集中 。マスク { 位置: 固定; 上: 0; 左: 0; zインデックス: 100; 幅:100vw; 高さ:100vh; 背景: 放射状グラデーション(50% に最も近い側 278rpx、透明 140rpx、rgba(0, 0, 0, .12) 180rpx、rgba(0, 0, 0, .22) 200rpx、rgba(0,0,0,.3) 220rpx、rgba(0,0,0, .4)) 繰り返しなし; } 要約する 各グラデーション レイヤーは背景画像として扱うことができます。つまり、各グラデーション レイヤーの位置、サイズ、繰り返しを指定できます。 PS を使用したことがある学生は、レイヤーの概念を知っているはずです。背景レイヤーの積み重ねの原理も同様です (もちろん、グラデーションも背景画像として使用できます)。グラデーションのサイズ、くり抜く場所、表示する場所、タイル化するかどうかを制御することで、ほとんどのシーンで基本的な効果を実現できます。もちろん、カット画像の方が高速ですが、カット画像ではすべてのシーンに適応できない場合があります。 背景が書かれる順序をマスターすると、望む効果を頭の中で思い描くのに役立ちます。 コードをコピー コードは次のとおりです。背景: bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: よく知られているブラウザのDOCTYPEモード選択メカニズム
>>: MySQL で sum 関数を使用する例のチュートリアル
Microsoft IE 5.0 がリリースされる前は、Web プログラミングにおける最大の課題は、...
設定は非常にシンプルですが、毎回確認しないといけないので、記録だけ残しておきます。 1. インストー...
序文これは、オンライン コンテナーの拡張によって発生した調査です。最終的には、実際の OOM が原因...
MySQL は次の 3 種類のコメントをサポートしています。 1. 行末の「#」文字から。 2. 「...
ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置し...
注意:この記事は現在取り組んでいる nestjs+graphql+serverless 合宿における...
「脳が多数の領域間の関係を処理できるように、入力は論理的なグループに分割する必要があります。」 – ...
jar パッケージを実行する Linux コマンドは次のとおりです。方法1: java -jar s...
目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...
レンダリング原理フォーム要素には、正規表現(携帯電話番号、メールアドレス、IDカードなど)をカスタマ...
カメラを開くと通常はスキャンボックスが表示されますが、静的なQRコードではフォーカスを合わせたりスキ...
目次1. 簡単な紹介2. 間隔を設定する2.1 説明2.2 パラメータ2.3 戻り値2.4 使用法3...
適切な VS Code 拡張機能を Visual Studio に追加すると、開発者としての作業がは...
この記事では、3階層ナビゲーションの表示と非表示を実現するためのVueの具体的なコードを例として紹介...
コンセプト紹介: 1. px (ピクセル):仮想的な長さの単位で、コンピュータ システムのデジタル画...