Several css black technologies

The black technology here is actually some properties in CSS that are not well known but are very useful in solving certain problems.

　border-radius

Many developers probably don’t understand this border-radius correctly, because basically many people use it like this:

.box {
  border-radius: 4px;
}

　 The slightly more high-end one is like this:

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

　 However, the ultimate black technology This is how it is used:

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

Yes, it can be assigned 8 values. Have you never seen it? Don’t worry, the specific explanation is as follows:

The one before the slash affects the horizontal direction, and the one behind the slash affects the vertical direction. Each number represents four different directions.

outline-offset

I believe many developers will be familiar with the following statement when writing CSS:

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

This is how to remove the default blue line frame from the input input box. In fact, another thing to mention here is that there is an outline-offset attribute in CSS. In this attribute, you can set the distance of the default wireframe; like this

input {
    outline-offset: 4px ;
}

　You can see the outline by adjusting the value of this attribute. The distance has changed.

Class declaration

You may all be familiar with the following class declaration:

.col-8 {
}

Of course it’s nothing, but if you write it like this:

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

Well, how does it look? You can use it like this ：

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

　As long as it is Unicode, you can declare your class like this.

　Select several consecutive elements

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

　The above writing method can actually select the seventh to fourteenth li elements below ol.

Pseudo-class setting single tag

　 There are several common single tags in HTML: <br> , <hr> etc.

The following example is to modify <hr>.

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

That’s right, the key is to use the two pseudo-classes: before and :after. Here, by the way, you can actually use these two pseudo-classes to modify <meta> and <link>, but the premise is that you set the display attributes of these two to:

display: block

attribute Case sensitive

If we have code similar to the following when writing html:

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

Then we use attribute selectors for CSS modification:

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

Such a declaration method will undoubtedly take effect. However, if we declare it like this, what will the result be like:

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

After this becomes uppercase, the first class="BOX" will not affect the <div class="box"> ;</div>, and the second type="EMAIL" will still modify the <input type="email"> normally. So when using attribute selectors, pay attention to capitalization issues.