いくつかの CSS ブラック テクノロジー

ここでのブラック テクノロジーは、実際にはあまり知られていないものの、特定の問題を解決するのに非常に役立つ CSS のいくつかのプロパティです。

border-radius

多くの開発者は、おそらくこの border-radius を正しく理解していません。基本的に多くの人が次のように使用しているためです:

.box {
  border-radius: 4px;
}

もう少し高級なものは次のようになります:

.box {
  border-radius: 4px 6px 6px 4px;
}

ただし、究極はブラックテクノロジーは次のように使用されます:

.box {
  border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}

はい、8 つの値を割り当てることができます。見たことがありませんか?具体的な説明は次のとおりです。

スラッシュの前の数字は水平方向に影響し、スラッシュの後ろの数字は垂直方向に影響します。それぞれの数字は 4 つの異なる方向を表します。

outline-offset

多くの開発者は CSS を記述するときに次のステートメントに精通していると思います:

input {
    outline : none;
}
input:focus {
    outline : none;
}

これは、入力入力ボックスからデフォルトの青い線フレームを削除する方法です。実は、ここでもう一つ言及しておきたいのは、CSS には、outline-offset 属性があり、この属性で、デフォルトのワイヤーフレームの距離を設定できます

input {
    outline-offset: 4px ;
}

この値を調整することで、輪郭を確認できます。距離が変わりました。

クラス宣言

皆さんは次のクラス宣言に精通しているかもしれません:

.col-8 {
}

もちろん何もありませんが、次のように書くと:

.♥ {
  color: hotpink;
}
.★ {
  color: yellow;
}

さて、次のように使用できますか?

<div class="♥ ★"></div>

Unicodeであればこのようにクラスを宣言できます。

連続した複数の要素を選択

ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}
/** Or Safari Way **/
ol li:nth-child(-n+14):nth-child(n+7) {
  background: lightpink;
}

上記の書き方で実際に選択できるのはol以下の7番目から14番目のli要素です。

擬似クラス設定単一タグ

HTMLには、
、

---

などの一般的な単一タグがいくつかあります。

次の例は、

---

を変更する例です。

hr:before {
    content: "♪♪";
}
hr:after {
    content: " This is an <hr> element";
}

そうです。重要なのは、before と :after の 2 つの疑似クラスを使用することです。ちなみに、これら 2 つの疑似クラスを実際に使用して と を変更できますが、前提条件として、これら 2 つの表示属性を次のように設定します。

display: block

属性 大文字と小文字を区別します

HTML を記述するときに次のようなコードがある場合:

<div class="box"></div>
<input type="email">

次に、CSS 変更に属性セレクターを使用します:

div[class="box"] {
  color: blue;
}
input[type="email"] {
  border: solid 1px red;
}

このような宣言メソッドは間違いなく有効になります。ただし、このように宣言すると、結果は次のようになります:

div[class="BOX"] {
  color: blue;
}
input[type="EMAIL"] {
  border: solid 1px red;
}

これが大文字になると、最初の class="BOX" は

には影響しません。 2 番目の type="EMAIL" は通常どおり を変更します。したがって、属性セレクターを使用するときは、大文字と小文字の区別に注意してください。

関連ラベル：

css

ソース：php.cn

前の記事：CSSの平行四辺形とひし形の変換 次の記事：モバイル Web 開発仕様の詳細

このウェブサイトの声明

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

著者別の最新記事

• php obキャッシュの紹介とob関数の詳細説明
  2023-03-07 21:36:01
• cmdコマンドを使用してMySQLのパスワードを変更する方法
  1970-01-01 08:00:00
• JavaScript が Cookie を操作してユーザー ログイン コード例を実装する方法の詳細な説明
  1970-01-01 08:00:00
• phpクラスとは何ですか? phpクラスの属性の詳細説明
  2023-03-11 13:22:01
• 基本的な JavaScript 関数 debounce、poll、once インスタンスの使用方法の詳細な説明
  1970-01-01 08:00:00
• php7の関数、宣言、戻り値などの新機能の紹介。
  2023-03-11 15:08:02
• php array_keys()を使用して配列キー名を取得する方法の詳細な説明
  2023-03-12 07:44:02
• PHPはリフレッシュバッファ関数の使い方を深く理解しています
  2023-03-11 10:18:01
• JavaScriptの関数の使い方と戻り値の使用例を詳しく解説
  1970-01-01 08:00:00
• Django がデータベースにクエリを実行するときのさまざまな種類の並べ替えの導入
  1970-01-01 08:00:00

最新の問題

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1335

ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...

から 2024-04-06 21:58:04

0

1

800

Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...

から 2024-04-06 20:57:16

0

1

487

CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...

から 2024-04-06 20:45:26

0

2

386

他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...

から 2024-04-06 20:41:51

0

1

518

関連トピック

詳細>

• css
• CSS中心
• CSSに画像を挿入する方法
• CSSが表示を超えています...
• CSSフォントの色
• CSSとは何ですか
• CSSで三角形を書く方法
• CSSで文字の色を設定する