CSS_html/css_WEB-ITnoseのブラックテクノロジー-htmlチュートリアル-php.cn

CSS_html/css_WEB-ITnoseのブラックテクノロジー

WBOY

リリース： 2016-06-21 09:09:32

オリジナル

973 人が閲覧しました

原文はこちらから: https://jellybool.com/post/css-that-you-may-not-know

いくつかの理由により、昨日は 1 つの投稿を投稿する約束だったブログを書きませんでした。これは昨日したことを補うためです。そうなると私はクリックベイトになります。ここでのブラックテクノロジは、実際にはあまり知られていないものの、特定の問題を解決するのに非常に役立つ 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 つの値を割り当てることができます。見たことがありませんか?心配しないでください。具体的な説明は次のとおりです:

斜线前面的影响的是水平方向，斜线后面影响的是垂直方向，各个数字就分别代表四个不一样的方向。

ログイン後にコピー

outline-offset

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

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

ログイン後にコピー

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

属性値のサイズを調整すると、次のようになります。概要距離が変わりました。

クラス宣言

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

input {    outline-offset: 4px ;}

ログイン後にコピー

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

.col-8 {}

ログイン後にコピー

さて、見た目は次のようになります:

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

ログイン後にコピー

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

連続する複数の要素を選択する

<br /><br /><div class="? ★"></div>

ログイン後にコピー

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

擬似クラス設定の単一タグ

HTML には、
、

などの一般的な単一タグがいくつかあります。詳細については、こちらをご覧ください:

http://www.w3.org/TR/html5/syntax.html#void-elements

次の例は、

を変更するものです。

そうです

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

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;}

ログイン後にコピー

属性大文字と小文字を区別する

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

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

ログイン後にコピー

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

display: block

ログイン後にコピー

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

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

ログイン後にコピー

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

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

現時点では、これらの CSS ブラックテクノロジを思い出す必要があると感じているので、いくつか追加することができます。

ハッピーハッキング