いくつかの 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" は