我有CSS3的问题.我不知道如何制作像这样的对角圆形渐变边框：
我找到了像this这样的东西：
.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,#3a4ed5 100%); border-image: linear-gradient(to bottom right,#3a4ed5 100%); border-image-slice: 1; }
<div class="Box"></div>
但不幸的是,这只适用于正方形.
任何帮助,将不胜感激.
解决方法
你可以尝试这样的东西,我使用了带-ve z-index的伪元素
注意：背景不透明,因为我使用了内部元素的背景颜色
.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>
