我有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>
但不幸的是,这只适用于正方形.
任何帮助,将不胜感激.
解决方法@H_404_15@
你可以尝试这样的东西,我使用了带-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>
注意：背景不透明,因为我使用了内部元素的背景颜色
.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>
