注意,border属性要写在border-image前面,不然没有渐变效果。已经设置了圆角,但是实际上确没有显示: image.png 解决方法为给元素包上一层父元素,设置父元素的背景色为同样的渐变色,把圆角设置在父元素上,通过padding达到边框的效果,下面看看改造后的效果: html: css: .box{ width: 700px; height: 50px; ba...
nodeper2楼•2 个月前
}a:before{position:absolute;width:98%;height:100%;content:'';display:block;border:1px solid;border-radius:30px;border-image:linear-gradient(to right, #9f1a2c, #012069);-webkit-border-image:linear-gradient(to right, #9f1a2c, #012069);-o-border-image:linear-gradient(to right, #9f1a2c,...
渐变色边框圆角设置无效,有什么别的办法吗
实现的效果: 按照平时写样式的思路,border-image实现渐变效果,border-radius实现边框圆角,把样式写好之后,大无语事件,圆角不见了,出现了下面的效果, ...
CSS 中 border 用了border-image,border-radius圆角设置就会失效,所以可以通过伪元素::before或者::after,使用背景线性渐变模拟实现。 .border-radius-linear-gradient { wid...
1. 解决border设置渐变后,border-radius无效的问题: .content { width: 100px; height: 100px; border: 10px solid; border-radius: 10px; border-image: linear-gradient(red,yellow) 30 30; } 注: ①. border-image无法实现圆角,上面会出现一个四方形的border有渐变色的方框. ②. 换个思路: a. 通过...
用border-image写了一个渐变,同时想要写一个圆角,写了border-radius但是并无作用,border-image不能实现圆角功能么
不过这种做法感觉不太灵活,如果要修改border的渐变颜色,就需要UI重新做图。那应该怎么做呢? 我首先想到的方法就是用CSS3的border-image属性 border-image有2种用法 ①:使用图片 ②:使用渐变 注:然后我选择使用上面第二种方法,渐变来实现。但遇到一个问题——border-raduis圆角属性设置无效 ...