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:
,

---

etc.

The following example is to modify

---

.

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 and , 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

, and the second type="EMAIL" will still modify the normally. So when using attribute selectors, pay attention to capitalization issues.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn