preface

When we do front-end development, we often encounter the need to add border effect to the elements, especially in some list, grid and other batch data display when item hover. The following figure is the hover state of ViPSHOP goods:Powerful CSS can be implemented in many ways to achieve this border effect. Such as: border, the outline, boxshadow, pseudo element border, etc. Here, I’ll show you some of the implementations I know and the differences.

border

When it comes to border implementation, the first thing you might want to do is to use the border property. Since this is a very common implementation, I’ll jump right into the pitfalls of using a border to implement borders in real development. On the demo:

<html> <head> </head> <body> <div class="container"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx3.sinaimg.cn%2Fmw690%2F005B96Eqly1gtu73qmbp4j60dw09qt9j02.j Pg&refer = HTTP % 3 a % 2 f % 2 fwx3 sinaimg. Cn&app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? = 1635486191 & t = c6a8a64ce66fbb6e the SEC a61256e0a828380d"/> </div> </body> </html>Copy the code
.container { width: 500px; height: 350px; } img { width: 100%; height: 100%; Border: 2 px solid RGB (250,0,255); }Copy the code

The effect is as follows:The border takes up space, meaning that each element has to make room for the border. The width of the container in the demo is 500px, and the img is 504px because of the border. If the container has overflow: Hidden set. The display will look like this:This is the problem with the size of the entire image because the border takes up space. Box-sizing: border-box; box-sizing: border-box; Let the img border be included in its size:As shown in the image above, the right and bottom border will not be truncated, but the overall image will be reduced. In this case, if the frame is displayed after the hover of the commodity list, there will be a hover display on the border at the same time the picture suddenly shrink effect, this effect often feels not harmonious.

outline

Here’s an example of a border implementation that doesn’t take up space: Outline. MDN also has its comparison with border:Let’s change the border of the demo above to outline:

Img {/* ORDER: 2px solid RGB (255,0,255); */ width: 100%; height: 100%; Outline: 2 px solid RGB (250,0,255); }Copy the code

The effect is as follows:We set the overflow of the container to hidden:If the border is missing, the outline takes up no space at the expense of being displayed outside the element, if the parent container has overflow: hidden; The border will not be visible. Or if there are adjacent elements, then oOutline overlaps with the adjacent elements:

box-shadow

Box-shadow: 0 0 0 2px (250 0 255); box-shadow: 0 0 2px (250 0 255); . This way to achieve the same effect as outline. The disadvantage is that it takes up the shadow setting, which can’t be done if the element also needs to be shaded.

Pseudo elements

The following is an implementation method that the author thinks has the least side effects, is the easiest to control and is also the most recommended in complex scenarios. That’s done by superimposing a pseudo-element on the element. Directly on the code:

<html> <head> </head> <body> <div class="container"> <div class="img-wraper"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx3.sinaimg.cn%2Fmw690%2F005B96Eqly1gtu73qmbp4j60dw09qt9j02.j Pg&refer = HTTP % 3 a % 2 f % 2 fwx3 sinaimg. Cn&app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? = 1635486191 & t = c6a8a64ce66fbb6e the SEC a61256e0a828380d"/> </div> </div> <div class="box2"></div> </body> </html>Copy the code
.container { width: 500px; height: 350px; } img {/* border: 2px solid RGB (250,0,255); */ width: 100%; height: 100%; /* Outline: 2px solid RGB (250,0,255); /* Outline: 2px solid RGB (250,0,255); Box-shadow: 0 0 0 2px (250,0,255); */ } .img-wraper{ width: 100%; height: 100%; position: relative; } .img-wraper:before { box-sizing: border-box; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; Border: 2 px solid RGB (250,0,255); } .box2{ width: 600px; height: 350px; background: green; }Copy the code

The effect is as follows:As you can see, the border is placed over the elements. The advantage is that it doesn’t take up any extra space, and it doesn’t squeeze the image and cause it to shrink. This will not be a problem if the parent container sets overflow:hidden, or if there are adjacent elements. This is especially useful in situations where the mouse hover over an element before displaying the border, appearing and disappearing naturally.

Afterword.

The above is the realization of the common frame in my daily work and their advantages and disadvantages. If you have a better opinion, please leave a message in the comments section