本文介绍了如何使对角圆边界渐变?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! 我有CSS3的问题。我不知道如何制作一个对角的圆形渐变边框:I have a problem with CSS3. I don't know how to make a diagonal round gradient border like that:我发现了类似此:.box { width: 250px; height: 250px; margin: auto; background: #eee; border: 20px solid transparent; -moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%); -webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%); border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%); border-image-slice: 1;}<div class="box"></div>推荐答案您可以尝试类似这样的东西,我使用了一个伪元素与-ve z-indexYou can try something like this i have used a pseudo element with -ve z-index注:背景不透明,因为我对内部元素使用了 background-colorNote: the background is not transparent as i have used a background-color for inner element.box { width: 250px; height: 250px; position: relative; margin: auto; margin: 30px; border-radius: 50%; background: #fff;}.box:after { content: ''; position: absolute; top: -15px; bottom: -15px; right: -15px; left: -15px; background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%); z-index: -1; border-radius: inherit;}<div class="box"></div> 这篇关于如何使对角圆边界渐变?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
09-05 20:24
查看更多