线性渐变不仅仅是CSS背景吗？

Question

It is possible to specify linear-gradient for the background or background-image CSS properties. Is it also possible to do so for the object as a whole, including borders, outline, etc.? Or a filter that does the same?

Answer 1

This is For border gradient ..

 .ps-top-to-bottom { position: relative; border-top: 3px solid black; } .ps-top-to-bottom:before, .ps-top-to-bottom:after { content: ""; position: absolute; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); background-image: -webkit-linear-gradient(#000, transparent); background-image: -moz-linear-gradient(#000, transparent); background-image: -o-linear-gradient(#000, transparent); background-image: linear-gradient(#000, transparent); top: -3px; bottom: -3px; width: 3px; } .ps-top-to-bottom:before { left: -3px; } .ps-top-to-bottom:after { right: -3px; } 

 <!-- THIS IS FOR BORDER--> <div class="ps-top-to-bottom"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> 

Answer 2

 #grad { background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, yellow); /* Standard syntax */ } 

 <div id="grad">hola mundo</div> 

and result is: