Several CSS of the black technology

The black technology here is actually some of the properties that are not known in CSS but are very easy to solve when solving certain problems.

Border-radius

Many developers estimate that this border-radius is not known correctly, because basically a lot of people use it:

. box {  border-radius:4px;}

A little high-end thing is this:

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

However, the ultimate black technology is used in this way:

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

Yes, it can assign 8 values, haven't you? Not in a hurry, the concrete explanation is this:

The front of the slash is the horizontal direction, the diagonal behind the effect is the vertical direction, each number represents four different directions.

Outline-offset

I believe many developers are familiar with the following statements when they write CSS:

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

This is the way to remove the input box from the default Blue Line box. In fact, here also say one is, CSS also has a Outline-offset property, in this property, you can set the default wireframe distance; like this.

input {    outline-offset:4px;}

Adjust the size of the property value so you can see that the distance of the outline has changed.

Declaration of the class

You may be familiar with the declarations of the following classes:

. col-8 {}

That's fine, of course, but if you write like this:

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

Well, how it looks, you can use it like this:

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

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

Select a number of consecutive elements

Ol Li:nth-child (n+7): Nth-child (-n+14) {  background:lightpink;} /** Or Safari **/ol li:nth-child (-n+14): Nth-child (n+7) {  background:lightpink;}

The above writing can actually reach the seventh to 14th Li elements under the ol.

Pseudo-Class Setup single label

There are several common single-label:<br>,

The following example is an implementation of

Hr:before {    content: "♪♪";} Hr:after {    content: "This was an 
Yes, the key is to use: Before and: After these two pseudo-classes. Here, by the way, you can also use these pseudo-classes to modify <meta> and <link>, but the premise is that you set both of the display properties to:

Display:block
property is case-sensitive

If we are writing HTML, there is a code similar to the following:

<div class= "box" ></div><input type= "Email" >
We then use the property selector for CSS retouching:

div[class= "box"] {  color:blue;} Input[type= "Email" {  border:solid 1px red;}
Such a declaration will undoubtedly take effect. However, if we declare this as follows, what will the result be like:

div[class= "box"] {  color:blue;} Input[type= "EMAIL" {  border:solid 1px red;}
This becomes capitalization, the first class= "box" does not affect the <div class= "box" ></div>, while the second type= "email" will still be modified <input type= "email" >. So when using the property selector, pay attention to the case.

