Как сделать нижний градиент границы?

Question

Пример:

Здравствуйте мне нужна помощь с созданием нижней границы с градиентом и прозрачными краями.

Как я могу создать этот эффект?

Answer 1

вы можете использовать псевдо-элемент для этого, позволяя более высокую поддержку браузеров, чем приграничном-изображение ..

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #222; 
 
} 
 
hr { 
 
    position: relative; 
 
    height: 0; 
 
    border: 0; 
 
} 
 
hr:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    height: 5px; 
 
    width: 100%; 
 
} 
 
.demo1:before { 
 
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); 
 
} 
 
.demo2:before { 
 
    background: linear-gradient(to right, rgba(179, 220, 237, 0) 0%, rgba(41, 184, 229, 1) 50%, rgba(188, 224, 238, 0) 100%); 
 
} 
 
.demo3:before{ 
 
    background: linear-gradient(to right, rgba(182,224,38,0) 0%,rgba(177,222,39,1) 50%,rgba(171,220,40,0) 100%); 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<hr class="demo1" /> 
 
<br /> 
 
<hr class="demo2" /> 
 
<br /> 
 
<hr class="demo3" />

обратите внимание

• предваряя здесь автоматически включается через скрипт без префикса.
• Я использовал элемент hr только для демонстрационных целей. однако, этот эффект может быть использован на все элементы, которые поддерживают использование элементов псевдо (т.е. div, a, p, и т.д.)