渐变边框圆角问题解决

最新推荐文章于 2024-04-25 09:57:10 发布

喜欢水晶头的小仙女

最新推荐文章于 2024-04-25 09:57:10 发布

阅读量959

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/laosi576197029/article/details/125878472

版权

边框渐变使用属性border-image: linear-gradient(180deg, red, blue);圆角不生效问题

效果如图:
在这里插入图片描述

思路: 外框使用渐变属性,上边线隐藏,用伪类写个带有弧度的盒子,定位上去,拼成一个带有弧度且边框渐变的样子
1:html

<div class="waikuang_father">
	<div class="waikuang"></div>
</div>

css///

.waikuang_father{
 border-radius:16px;
 overflow: hidden;
}
.waikuang{
    border-radius: 16px;
	border: 1px solid;
	linear-gradient(180deg, red, rgba(255, 255, 255, 0)) 1 1;
	position: relative;
}
.waikuang::before{
      content: '';
	  display: block;
	  width: 100%;
	  height: 50px;
	  border:1px solid red;
	  border-bottom:0;
	  position: absolute;
	  top:0;left:-1px;
	  border-radius: 16px 16px 0 0;
}