css边框渐变色处理圆角解决方案 |
您所在的位置：网站首页 › css边框圆斜角 › css边框渐变色处理圆角解决方案 |
|
css边框渐变色处理圆角解决方案
使用css 边框渐变属性，可以实现不带圆角的边框渐变：代码如下： .box{ border-style: solid; border-width: 1px; border-image-source: linear-gradient(0deg, #79c8ff 1%, #dc4f97 31%, #f85658 46%, #ff7b4f 70%, #ffa469 100%); border-image-slice: 1; } 复制代码但是如果要带上圆角，上面的代码是无法实现的。也就是使用了边框渐变后，无法通过设置boreder-radius 来设置圆角，尽管你加上boreder-radius属性后，还是不会变成圆角。 由此，采用了一种折中的方案。即：多加一层元素 1、给外层元素增加padding值，padding值的大小为边框所需的大小。 2、给外层元素设置渐变色背景。 案例代码 复制代码 .box{ padding: 1px; background-image: linear-gradient(0deg, #79c8ff 1%, #dc4f97 31%, #f85658 46%, #ff7b4f 70%, #ffa469 100%); border-radius: 4px; box-sizing: border-box; overflow: hidden; } .content{ height: 200px; background-color: #1d3d8e; border-radius: 4px; box-sizing: border-box; overflow: hidden; } 复制代码实现的样式： |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |