Implementation method code of CSS left vertical bar

Do not consider compatibility when solving problems. The questions are wild and unconstrained. Just say whatever comes to mind. If there are CSS properties that you feel are unfamiliar in the problem solving, go and learn about it quickly.

Keep updating, keep updating, keep updating, say important things three times.

Question 1. How many ways can the following graphic be implemented using only one label:

##Suppose our single tag is a p:

<p></p>

is defined as follows General CSS:

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

Method 1: border

This should be the easiest and easiest thing to think of

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

Method 2: Use pseudo elements

A label, counting the before and after pseudo-elements, actually has three labels. This is also the basis for many single-label drawings. In this question, it can be easily accomplished using pseudo elements.

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

Method three: outer box-shadow

Box shadow box-shadow Most people just use it Generate shadows. In fact, shadows can have multiple shadows, and shadows cannot be blurred. This requires understanding the specific functions of each parameter of box-shaodw. Use box-shaodw to solve the problem

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

Method 4: Inner box-shadow

The box shadow has another parameter inset, used to set the inner shadow, can also be completed:

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

Method 5: drop-shadow

drop-shadow is one of the new filters in CSS3 filter. It can also generate shadows, but it only has 3 numerical parameters, which is less than box-shadow. one.

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

Method Six: Gradient linearGradient

Flexible use of CSS3 gradients can complete a large number of unexpected graphics. CSS3 gradients are divided into linear gradients and Radial gradient. This question uses linear gradient, which can be easily solved:

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

Method 7: Outline

This is used less often. An outline is a line drawn around an element, just outside the edge of the border, to highlight the element. This method is considered the next best option.

p{
    height:50px;
    outline:5px solid deeppink;
}
p::after{
    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 Little Match and is implemented by changing the scroll bar style:

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

Putting aside practicality, if you just simulate this style, this method is really eye-catching.

The above are the 8 methods that come to mind. It is not excluded that there are some unexpected methods. I hope there are other methods that can be put forward in the comments. You can click here to see the specific 8 implementations:

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

The above is the detailed content of Implementation method code of CSS left vertical bar. For more information, please follow other related articles on the PHP Chinese website!