Several CSS black technologies_html/css_WEB-ITnose

Original source: JellyBool (@JellyBool) Welcome to share the original to Bole Toutiao

Due to some reasons, I didn’t write a blog yesterday. I promised to post one post every day. This is To make up for what I did yesterday. Then I will become a clickbait. 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 do not understand this border-radius correctly, because basically many people use it this way:

CSS

1 2 3

.box {   border-radius: 4px; }

1

2

3

.box {

border-radius: 4px;

}

The slightly higher-end version is Like this:

1 2 3

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

CSS

However, the ultimate black technology is used like this:

CSS

1

2

3

1 2 3

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

.box {

border-radius: 4px 6px 6px 4px;

}

1	斜线前面的影响的是水平方向，斜线后面影响的是垂直方向，各个数字就分别代表四个不一样的方向。

1 2 3

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

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

1	The one before the slash affects the horizontal direction, and the one after 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:

CSS

1 2 3 4 5 6 7

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

1

2

3

4

5

6

7

input { outline : none;

}

1 2 3

input {     outline-offset: 4px ; }

input:focus {

outline : none;

}

This is how to remove the default blue line frame from the 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

CSS

1 2 3

.col-8 {   }

1 2 3

input { outline-offset: 4px; }

Adjust the size of this attribute value and you can see The distance to the outline changes. Class declaration Everyone may be familiar with the following class declaration: CSS

1 2 3

.col-8 { }

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

CSS

1 2 3 4 5 6 7

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

1

2

3

4

5

6

7

.? { color: hotpink;

}

1

.★ {

color: yellow;

}

Well, how does it look, you can use it like this:

1 2 3 4 5 6 7

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

CSS

1

As long as it is Unicode, you can declare your class like this. Select several consecutive elements CSS

1 2 3 4 5 6 7

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. Details can be found here:

http://www.w3.org/TR/html5/syntax.html#void-elements

The following example is to modify

---

.

CSS

1 2 3 4 5 6 7

hr:before {     content: "??"; }   hr:after {     content: " This is an element"; }

1

2

3

4

5

6

7

hr:before { content: "?? ";

}

1	display: block

hr:after {

content: " This is an

---

element";

}

Yes, the key is to use the :before and :after pseudo-classes. 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:

CSS

1 2

1	display: block td>

Attributes are case sensitive Suppose we have code similar to the following when writing html: XHTML

1 2

Then we use attribute selectors for CSS modification:

3

4

1 2 3 4 5 6 7

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

5 6

7

div [class="box"] {

color: blue;

}

input [type="email"] {

border: solid 1px red;

}

1 2 3 4 5 6 7

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

Such a statement The method will undoubtedly work. However, if we declare it like this, what will the result be like: 🎜> 3 4 5 6 7 div [class="BOX"] { color: blue; } input [type="EMAIL"] { border: solid 1px red; }

After this becomes uppercase, the first class="BOX" will not affect

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

Currently, I just feel like I need to remind myself of these CSS black technologies, and I can add some.

Happy Hacking

It is said that programmers have high wages, but few understand the pain of working overtime. Are you there every time? I think in my heart that the salary calculated based on time is too low, so I want to shout in my heart, either a salary increase, a salary increase, or a salary increase, why? ? Because we are not allowed to work overtime, this is impossible! ! !

Want to subvert your work model? Want to reduce your overtime hours? Join us and explore with us the freedom model that belongs to our programmers!

A native APP for programmers, with the purpose of sharing knowledge and skills, and an online interactive platform in the form of rewards.

We have a top technical team of nearly 20 people, as well as an excellent product and operations team. The team leaders all have more than 10 years of experience in the industry.

Now we are recruiting original participating heroes. You will work with us to change the way programmers work and change the world of programmers! There will also be generous rewards. As our original participant, you will experience this programmer artifact with us. You can make professional suggestions, and we will humbly adopt them. Everyone will be a hero, and you will be the hero we need! At the same time, you can also invite your friends to participate in this hero recruitment interaction.

We won’t waste too much of your time, we just need your professional opinion. As long as you spare 1 hour from a month, you can save two hours every day in the future, everything is for ourselves !

Come? Still not coming?

Contactor password: 1955246408 (QQ)