Some interesting CSS questions (1)-implementation method of the left-side vertical bar and css vertical bar

Some interesting CSS questions (1)-implementation method of the left-side vertical bar and css vertical bar

In this series, we will discuss some interesting CSS questions. Aside from practicality, some questions will be discussed to broaden the ideas for solving the problem. In addition, they will involve CSS details that are easy to ignore.

Compatibility is not taken into consideration in solving the problem. The question is just a blank question. What do you think of? If you have the uncommon CSS attribute in solving the problem, please study it.

Update, update, and update important things three times.

All questions are summarized in my Github.

Question 1: How many implementation methods can this image use only one label:

Assume that our single tag isdiv:

<div></div>

The definition is as follows:CSS:

div{    position:relative;    width:200px;    height:60px;    background:#ddd;}

Method 1: border

This should be the easiest thing to think.

div{    border-left:5px solid deeppink;}

Method 2: use pseudo elements

One tag.beforeAndafterThe pseudo element actually has three tags, which is also the basis for drawing many single tags. In this question, the use of pseudo elements can be easily completed.

div::after{    content:"";    width:5px;    height:60px;    position:absolute;    top:0;    left:0;    background:deeppink;}

Method 3: external box-shadow

Box shadowbox-shadowMost people only use a shadow to generate shadows. In fact, shadows can have multiple shadows, and shadows cannot be virtualized. You need to understand this.box-shaodwThe specific role of each parameter. Usebox-shaodwProblem Solving

div{    box-shadow:-5px 0px 0 0 deeppink;}

Method 4: inner box-shadow

Box shadow also has a parameterinsetUsed to set the inner shadow. You can also complete the following steps:

div{    box-shadow:inset 5px 0px 0 0 deeppink;}

Method 5: drop-shadow

drop-shadowIs a filter added by CSS3.filterA filter in can also generate a shadow, but it has only three numeric parameters, one less than box-shadow.

div{    filter:drop-shadow(-5px 0 0 deeppink);}

Method 6: gradient linearGradient

The flexible use of CSS3 gradient can complete a lot of unexpected graphics, CSS3 gradient is divided into linear gradient and radial gradient, this question uses linear gradient, you can easily solve the problem:

div{    background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);}

Method 7: outline

This is rarely used. outline (outline) is a line drawn around the element. It is located on the periphery of the border edge and can highlight the element. This method is the next option.

div{    height:50px;    outline:5px solid deeppink;}div{    position:absolute;    content:"";    top:-5px;    bottom:-5px;    right:-5px;    left:0;    background:#ddd;}

 

Method 8: scroll bar

This method is provided by the Blue ideal of a small match by changing the scroll bar style:

div{    width:205px;    background:deeppink;    overflow-y:scroll;}div::-webkit-scrollbar{    width: 200px;    background-color:#ddd;}

Aside from practicality, if we just simulate this style, this method is truly eye-catching.

　　

The above are the eight methods that I think of. I don't know what I did not expect. I hope other methods can be put forward in the comments. The specific eight implementations can be listed here:

Codepen-Implementation of the vertical bar on the left of a single label

 

All the questions are summarized on my Github and sent to my blog for more communication.

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.