通常の開発では、凸型の丸い角、つまり border-radius 属性を使用するのが一般的です。凹角がある場合、一般的に 2 つの実装方法を検討します。 1 つは背景画像を直接使用し、もう 1 つは CSS を使用する方法です。 使用されるプロパティは、radial-gradient と組み合わせた background または background-image です。例: 背景画像: 放射状グラデーション(200px at 50px 0px, #fff 50px, #4169E1 50px); 放射状グラデーションの場合、制御するパラメーターは主に 3 つあります。 1つは起源と大きさです。サイズは border-radius と同様です。原点は at で表され、点の座標を指定するか、left、right、top、bottom で指定します。 次は2つの色と透明度、サイズなどです。ここで 50px またはパーセンテージですが、最初のものをテストしたところ、50 のみが半角丸で、2 番目の 50px はほとんど効果がないようです。 例: 写真のような薄緑色の凹角スタイルを実現するための素材画像はありません。 開始: まず、この div の幅と高さを設定し、相対的な位置を設定します。次に、その中に絶対位置に配置された 4 つの要素を配置し、幅と高さを凹部のサイズと同じに設定してから、絶対位置を指定して 4 つの角に固定します。次に、上記の凹型スタイルを使用します。 上の 2 つは完成が非常に簡単ですが、下の 2 つのコーナーは、位置と凹の位置を設定するだけで、次のようになります。 これには別の回転が必要です。 完全なコードは次のとおりです。 CS: ... .notice_box_cls #共通通知 { 背景色: #E8F7F2; パディング: 20px 10px; } .notice_box_cls .notice_body0 { 位置: 相対的; } .notice_box_cls .notice_body { background:radial-gradient(左上15px、#fff 50px、#E8F7F2 50%); 位置: 絶対; 左: 0; 上: 0; 幅: 15px; 高さ: 15px; } .notice_box_cls .notice_body1 { background:radial-gradient(右上15px、#fff 50px、#E8F7F2 50%); 位置: 絶対; 右: 0; 上: 0; 幅: 15px; 高さ: 15px; } .notice_box_cls .notice_body2 { background:radial-gradient(右下15px、#fff 50px、#E8F7F2 50%); 位置: 絶対; 左: 0; 下部: 0; 幅: 15px; 高さ: 15px; 変換: 回転(90度); } .notice_box_cls .notice_body3 { background:radial-gradient(左下15px、#fff 50px、#E8F7F2 50%); 位置: 絶対; 右: 0; 下部: 0; 幅: 15px; 高さ: 15px; 変換: 回転(270度); } html: <div class="notice"> <divクラス=""> <div class="notice_title"> <span>お知らせとお知らせ</span> </div> <div class="notice_body0"> <ul id="commonNotice"> <!-- <li><a href="#" class="fl">湖北省教育情報化 S1</a><i class="fr">2017-5-13</i></li> <li><a href="#" class="fl">湖北省教育情報化 S2</a><i class="fr">2017-5-13</i></li> <li><a href="#" class="fl">湖北省教育情報化 S3</a><i class="fr">2017-5-13</i></li> <li><a href="#" class="fl">湖北省教育情報化 S4</a><i class="fr">2017-5-13</i></li> <li><a href="#" class="fl">湖北省教育情報化 S5</a><i class="fr">2017-5-13</i></li> <li><a href="#" class="fl">湖北省教育情報化 S6</a><i class="fr">2017-5-13</i></li> --> </ul> <div class="notice_body"> </div> <div class="notice_body1"> </div> <div class="notice_body2"> </div> <div class="notice_body3"> </div> </div> </div> </div> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
目次1. 古いバージョンを削除する2. サーバーのカーネルタイプを確認し、適切なバージョンをダウンロ...
レイアウトを編集するとき、通常は水平センタリングと垂直センタリングを使用してデザインします。水平セン...
Nginx はネストされた if ステートメントをサポートしておらず、if ステートメントでの論理判...
ビジネスシナリオ: 異なるデータベース内のテーブルをクエリするたとえば、関連付けられるテーブルは、マ...
現在、OK ボタンをクリックしたときやキーボードの Enter キーを押したときに操作を実行するとい...
マシンに MySQL バージョン 5.0 がすでに存在する場合は、最新バージョンの MySQL のイ...
仕事を探しています!!!事前準備:まず、このアニメーションは、以前のローディングアニメーションとクー...
目次序文背景大きな推測パターンを見つける構造とスタイルコンポーネントの実装パラメータキーボードの種類...
現在、Docker には中国向けの公式ミラーがあります。詳細については、https://www.do...
目次1. キャラクター文法パラメータ索引戻り値2. 連結文法パラメータ文字列2 [, …文字列N]戻...
MySQL は、異なるユーザーに異なる権限を割り当てることができるマルチユーザー管理データベースであ...
目次使用されるAPI簡単な例人.ts親コンポーネントサブコンポーネント効果要約する使用されるAPI ...
(1)はじめに: clipboard.js は、テキストをクリップボードにコピーする機能を実装する軽...
この記事では、例を使用して、MySQL ビューの作成 (CREATE VIEW) と使用上の制限につ...
トランザクション ログには、関連するデータベースに対する操作が記録され、データベースの回復に関連する...