CSS实线边框渐变以及虚线边框渐变 |
您所在的位置：网站首页 › css实线边框 › CSS实线边框渐变以及虚线边框渐变 |
|
1. 实线边框渐变.border-block {
border: 10px solid transparent;
border-image: linear-gradient(to top, blue, red);
border-image-slice: 10;
} 实现效果如下: 给border-image加linear-gradient不难理解，但是如果单纯使用border-image，会发现效果是这样的： 所以关键作用是border-image-slice属性。 先看下border-image属性。 border-image是border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat的简写。 border-image-source 属性可以给定一个url作为边框图像，类似background-image: url的用法； border-image-slice是指将边框图片切成9份，四个角四个边，和一个中心区域。被切割的9个部分分布在边框的9个区域。 当盒子宽度和被切图像的宽度不相等时，四个顶角的变化具有一定的拉伸效果。border-image-slice属性默认值是100%，这个百分比是相对于边框图像的宽高来的，当左右切片宽度之和>100%时，5号7号就显示空白，因此使用默认值无法看到被填满的边框图片。关于boder-image具体可以查找资料。 2. 虚线边框渐变CSS代码：.box { width: 200px; height: 150px; border: 2px dashed #cd0000; box-sizing: border-box; } @supports (-webkit-mask: none) or (mask: none) { .box { border: none; background: linear-gradient(to bottom, #34538b, #cd0000) no-repeat; -webkit-mask-image: linear-gradient(to right, #000 6px, transparent 6px), linear-gradient(to bottom, #000 6px, transparent 6px), linear-gradient(to right, #000 6px, transparent 6px), linear-gradient(to bottom, #000 6px, transparent 6px); -webkit-mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y; -webkit-mask-position: 0 0, 0 0, 0 100%, 100% 0; -webkit-mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px; /* 合并写法 */ mask: linear-gradient(to right, #000 6px, transparent 6px) repeat-x, linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y, linear-gradient(to right, #000 6px, transparent 6px) repeat-x 0 100%, linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y 100% 0; mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px; } }HTML代码：本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |