梧州推广网站服务商企业邮箱注册申请163

梧州推广网站服务商,企业邮箱注册申请163,网站做seo,惠州网站设计公司在项目中需要实现一个圆角渐变边框效果。我的第一反应是使用 border-radius 对 border-image。然而实践后发现 border-radius 对 border-image 不生效效果是这样的#xff1a;给 div 设置了 border-radius#xff0c;但边框仍然是直角。为什么 border-radius 对 border-image…在项目中需要实现一个圆角渐变边框效果。我的第一反应是使用border-radius对border-image。然而实践后发现border-radius对border-image不生效效果是这样的给 div 设置了border-radius但边框仍然是直角。为什么border-radius对border-image失效两者的工作层级不同border-radius作用在 div 元素上它控制的是整个 div 轮廓的圆角。border-image绘制边框是独立于 div 之外的是脱离于 div 的。所以看到的效果就是边框依然是直角而 div 是圆角。实现方案主要通过两点来实现:创建一个稍大于主元素的伪元素并设置渐变背景。使用CSS遮罩挖空中间部分只留下边框区域。代码如下.gradient-border-box{width:100px;height:100px;border-radius:6px;position:relative;}.gradient-border-box::before{content:;position:absolute;top:0;left:0;right:0;bottom:0;border-radius:6px;/* 和主元素相同的圆角 */padding:1px;/* 边框宽度 *//* 渐变效果 */background:linear-gradient(360deg,rgba(96,161,250,0.5),rgba(96,161,250,1));/* CSS遮罩 */mask:linear-gradient(#fff 0 0)content-box,linear-gradient(#fff 0 0);mask-composite:exclude;}方案解析主元素: 负责内容区域和圆角只设置border-radius。伪元素: 负责绘制渐变边框它的位置与大小覆盖主元素通过background绘制渐变padding控制边框宽度mask挖空中间区域伪元素中的遮罩详解mask:linear-gradient(#fff 0 0)content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask: 这行代码创建了两个完全相同的白色矩形遮罩第一个仅作用于内容区域content-box第二个作用域整个元素区域border-box。第一个linear-gradient(#fff 0 0)创建一个纯白色矩形线性渐变从0%到0%content-box指定遮罩的参考框作用域元素的内容区域不包括padding、border第二个linear-gradient(#fff 0 0)创建了一个白色矩形默认是 border-box包括内容paddingborder。mask-composite:exclude: 控制多个遮罩如何组合exclude代表异或操作。结合遮罩解释就是:边框区域 border-box整个区域 - content-box中心区域