CSS to the left vertical bar implementation method code

problem-solving does not consider compatibility, the topic of unrestrained, think of what to say, if you feel the problem in the CSS properties of the rare, hurriedly to cram it.

Constantly updated, constantly updated, constantly updated, important things to say three times.

Topic 1, below this graph, only uses one label, can have how many kinds of realization way:

Suppose our single label is one p :

<p></p>

Define the following generic CSS :

p{    position:relative;    width:200px;    height:60px;    Background: #ddd;}

Law One: border

This should be the most easily thought out.

p{    border-left:5px solid Deeppink;}

Method two: Using pseudo-elements

A label, counted on before and after pseudo-element, in fact, there are three tags, which is also a lot of single-label Mapping Foundation, the subject, the use of pseudo-elements can be easily completed.

p::after{    content: "";    width:5px;    height:60px;    Position:absolute;    top:0;    left:0;    Background:deeppink;}

Law III: Outer Box-shadow

Box Shadow box-shadow Most people just use to generate shadows, in fact, the shadow can have multiple shadows, the shadow can not be empty, this need to understand box-shaodw the specific role of each parameter. Use box-shaodw problem Solving

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

Law IV: Inner Box-shadow

The box shadow also has a parameter inset for setting the inner shadow, or it can be done:

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

Law V: Drop-shadow

drop-shadowCSS3 is one of the filter filters in the new filter, you can also generate a shadow, but it has a numeric parameter number of only 3, less than the Box-shadow one.

p{    Filter:drop-shadow ( -5px 0 0 deeppink);}

Law vi: Gradient lineargradient

Flexible use CSS3 gradient can complete a lot of unexpected graphics, CSS3 gradient into linear gradient and radial gradient, the subject using linear gradient, can easily solve the problem:

p{    background-image:linear-gradient (90deg, Deeppink 0px, deeppink 5px, Transparent 5px);}

Law VII: Contour outline

This is used relatively little, outline (contour) is drawn around the element of a line, located at the edge of the bounding rectangle, can play the role of prominent elements. This method is considered the next choice.

p{    height:50px;    outline:5px solid Deeppink;} p::after{    Position:absolute;    Content: "";    top:-5px;    bottom:-5px;    right:-5px;    left:0;    Background: #ddd;}

Law VIII, scroll bar

This method is provided by the blue ideal of a small match, which is achieved by changing the scroll bar style:

p{    width:205px;    Background:deeppink;    Overflow-y:scroll;} p::-webkit-scrollbar{    width:200px;    Background-color: #ddd;}

It's really a bright way to put aside the practicality and just simulate the pattern.

The above is the thought of 8 ways, do not rule out the unexpectedly, I hope there are other methods can be put forward in the comments, the specific 8 kinds of implementation can be poked here to see:

codepen-How to implement the left vertical bar of single label