提问人：Ilona 提问时间：9/7/2023 最后编辑：MincedMeatMoleIlona 更新时间：9/8/2023 访问量：28
具有线性渐变和半径的上边框 [复制]
top-border with linear-gradient and radius [duplicate]
问：
我尝试创建一个具有线性渐变和半径的唯一顶部边框。我做了顶部边界，但我无法执行半径。有可能做到这一点吗？
我希望在顶部边框上有线性渐变的弯角
.grid-area{
background-color: hsl(227, 47%, 96%);
text-align: center;
padding: 20px 0;
cursor: pointer;
border-radius: 5px;
}
.grid-area-4{
grid-area: grid-area-4;
border-style: solid;
border-image: linear-gradient(to right, hsl(37, 97%, 70%) , hsl(329, 70%, 58%)) 1/3px;
border-image-slice: 100 0 0;
}<div class="grid-area grid-area-4"><p>Some text</p></div>答：
0赞
roye7777777
9/7/2023
#1
你的意思是你想在上面放置一个渐变，而圆角没有被渐变截断？那么这可能是一种方法
.grid-area{
position:relative;
background-color: hsl(227, 47%, 96%);
text-align: center;
padding: 20px 0;
cursor: pointer;
border-radius: 5px;
}
.grid-area-4 {
grid-area: grid-area-4;
background-image: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%));
background-position:top;
background-size:100% 5px;
background-repeat:no-repeat;
}
评论
0赞
Ilona
9/10/2023
这正是我需要的。谢谢你！
评论