border渐变,css边框渐变
七娃博客369 次
前端经常会用到渐变背景,如果总是用图片,显得自己很不专业,对于背景渐变很多人都会,也经常用,那么今天七娃总结一个 border边框的渐变实现方法:
border: 2px solid; border-image: -webkit-linear-gradient( red, blue) 30 30; border-image: -moz-linear-gradient( red, blue) 30 30; border-image: linear-gradient( red, blue) 30 30;
效果如下:
解释:首先设置边框border有宽度,和线条类型,这里七娃用的是实线solid,你们也可以用虚线测试一下;然后通过边框背景border-image进行渐变填充,我们来看一下border-image的属性:
border-image: source slice width outset repeat|initial|inherit;
border-image-source | 用于指定要用于绘制边框的图像的位置 |
border-image-slice | 图像边界向内偏移 |
border-image-width | 图像边界的宽度 |
border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
border-image-repeat | 用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。 |
以下为“菜鸟教程”的例子:
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源:border渐变,css边框渐变 - Qui-Note
[…] box-shadow 实现多重边框效果,注意这里不是真正意义上的border,它是通过利用投影的第四个属性(spread-radius)向内外扩展,需要几层投影就用英文,符号区分 例如:用此属性实现塑胶跑道效果 box-shadow: 0 0 0 5px red,0 0 0 10px white,0 0 0 15px red,0 0 0 20px white,0 0 0 25px red; […]