CSS ブラック テクノロジー補足_html/css_WEB-ITnose

原文: https://jellybool.com/post/css-that-you-may-not-know-part-2

前回 CSS ブラック テクノロジーについて書いた後、今回はCSS で開発者の注目を集めない可能性のあるいくつかのプロパティを見つけました。

empty-cells

実際、テーブルでは、empty-cells 属性を使用して、次のような対応するスタイルを指定できます。

table {  empty-cells: hide;}

上記のステートメント行は、テーブル要素内の空のセルを非表示にすることができます。

border-image

実際、これが開発中に見られるのは比較的珍しいかもしれません。もし私が特にドキュメントを見に行かなかったら、この border-image があることを本当に発見することはできなかったでしょう。名前の意味は、Border に次の画像を指定できることを意味します:

.border-image-example {      -webkit-border-image: url(border-image.jpg) 45 20 45 30 repeat;      -moz-border-image: url(border-image.jpg) 45 20 45 30 repeat;      border-image: url(border-image.jpg) 45 20 45 30 repeat;}

text-decoration

text-decoration を何も割り当てないことに慣れたら、この小さな友達をもう一度理解する必要があります。実際には 3 つの変数宣言を受け入れることができます。

a {  text-decoration: overline aqua wavy;}

これら 3 つはそれぞれ、text-decoration-line、text-decoration-color、text-decoration-style で表されます

clip

おそらく多くの人が、最初にクリップを使い始めたとき、次のように書いたでしょう:

.example {    clip: rect(110px, 160px, 170px, 60px);}

そのとき私は、それが機能しなかったことに驚きました。なぜですか?したがって、ここで注意する必要があるのは、クリップは位置が絶対であるか、位置が固定されている場合にのみ機能するということです。

::first-letter

これは非常に魔法のように感じますが、一般的に使用される CSS では中国語のテキストを変更するのにあまり役に立たないかもしれませんが、これを見たとき、実際にそのようなものがあることに非常に驚きました:

<br /><br /><div class='text'>    I am sample text</div>

その後、CSS は次のように記述できます:

.text::first-letter {  color: blue;  background: yellow;}

最初の文字 I が変更されます。これは素晴らしいことです。今のところはここまでです....

ハッピーハッキング