有一些标志，它们有边框样式。 这种风格怎么做？ 我使用了线性渐变框阴影

Question

How to design border like this ? i tried using horizontal lines but not getting any solutions

Answer 1

Solution 1:

If its just a simple straight line then use border-top and border-bottom:

border-top: 1px solid #f2f2f2; 
border-bottom: 1px solid #f2f2f2; 

 .image { width: 50; height: 50; } .logos { margin: 15px 0; display: flex; border-top: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; }

 <div class="logos"> <div class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo-200-200-fond-blanc.png"> </div> <div class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo-200-200-fond-blanc.png"> </div> <div class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo-200-200-fond-blanc.png"> </div> <div class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo-200-200-fond-blanc.png"> </div> <div class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo-200-200-fond-blanc.png"> </div> </div>

Solution 2: Use liner gradient

If you want a gradient effect, use liner-gradient for lines:

  background: linear-gradient(to left, rgba(255,0,0,0), rgb(204 204 204), rgba(255,0,0,0));

 .image { width: 50; height: 50; } .logos { margin: 15px 0; display: flex; } .blurred-line { height:1px; margin:0 auto; background: linear-gradient(to left, rgba(255,0,0,0), rgb(204 204 204), rgba(255,0,0,0)); }

 <div class='blurred-line'></div> <div class="logos"> <div class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo-200-200-fond-blanc.png"> </div> <div class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo-200-200-fond-blanc.png"> </div> <div class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo-200-200-fond-blanc.png"> </div> <div class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo-200-200-fond-blanc.png"> </div> <div class="image"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Logo-200-200-fond-blanc.png"> </div> </div> <div class='blurred-line'></div>