CSS black technology supplement_html/css_WEB-ITnose

Original text from: https://jellybool.com/post/css-that-you-may-not-know-part-2

Following the last time I wrote After learning about CSS black technology, this time it seems that I have also specifically looked for some attributes in CSS that may not attract the attention of developers.

empty-cells

In fact, in the table, you can use the empty-cells attribute to specify the corresponding style, such as:

table {  empty-cells: hide;}

The above line of declaration is Empty cells in table elements can be hidden.

border-image

In fact, this may be relatively rare to see in development. If I didn’t go to the documentation specifically, I really wouldn’t have discovered that there is this border-image. That’s right, just like The names have the same meaning. You can specify an image for the 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

After getting used to assigning text-decoration to none, we need to re-understand this Friends, it actually accepts three variable declarations:

a {  text-decoration: overline aqua wavy;}

These three represent: text-decoration-line, text-decoration-color and text-decoration-style

clip

Maybe many people wrote like this when they first started using clip:

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

Then they were surprised to find that it didn’t work. Why? So what needs to be noted here is that clip only works when position is absolute or position is fixed.

::first-letter

This feels quite magical. Although it may not be very useful for our commonly used CSS to modify Chinese text, I was actually quite surprised when I saw this. There is actually this thing:

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

Then CSS can be written like this:

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

The first letter I will be modified, which is amazing. That’s all for now....

Happy Hacking