Talk about some interesting CSS topics (i)--how to implement the vertical bar on the left

Folio Series, discuss some interesting CSS topics, aside from practicality, some topics in order to broaden the problem-solving ideas, in addition, involves some easy to ignore CSS details.

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.

Aggregated on my Github, sent to the blog hoping to get more solutions.

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

Suppose our single label is one div :

<div></div>

Define the following generic CSS :

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

law One: border

This should be the most easily thought out.

div{    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.

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

div{    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:

div{    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.

div{    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:

div{    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.

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

The above is I think of 7 ways, do not rule out the idea, the concrete implementation can be poked here to see:

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

All topics are aggregated on my Github and sent to blogs hoping to get more solutions.

To this end of this article, if there are any questions or suggestions, you can communicate a lot, original articles, writing limited, Caishuxueqian, if there is not in the text, million hope to inform.

Talk about some interesting CSS topics (i)--how to implement the vertical bar on the left