通常の開発では、凸型の丸い角、つまり 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. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...
データベースを作成する右クリック - 新しいデータベースを作成ライブラリ名を入力し、文字セットと並べ...
注: sg11 弊社では Linux システム仮想ホストのセルフインストールのみサポートしております...
0. 新しい操作: mkdir abc #新しいフォルダを作成 touch abc.sh #新しいフ...
NERDTree は Vim 用のファイル システム ブラウザーです。このプラグインを使用すると、ユ...
この記事の例では、計算機機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な...
シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...
目次序文クロージャの紹介メモリのゴミを識別する方法クロージャのメモリ表現結論序文クロージャは、Jav...
次のような要件があります: インポート ボタン。ボタンをクリックして Excel テーブルをインポー...
導入MySQL はレプリケーションを通じてストレージ システムの高可用性を実現します。現在、MySQ...
Linux LVM論理ボリューム構成プロセスの詳細な説明多くの Linux ユーザーは、オペレーティ...
目次グローバル変数 globalDataページプライベート変数データストレージ非同期ストレージ(デバ...
今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...
ご存知のとおり、mailto は Web デザインと制作において非常に実用的な HTML タグです。...
MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...