市政府网站开发实例不要手贱搜这15个关键词
需求：
- 普通的div 边框不好看，做一个渐变色
进程：
- 最简单的当然是做一个内部是白色的边框是渐变色的图，然后使用
background: url("back.jpg")，这样看起来就像是做了一个渐变的边框 - 如果做不了图，可以做一个渐变的背景如何用白底把中间的覆盖掉
{.box1 {background: linear-gradient(180deg, #F0F1F5 0%, #FFF 100%); // 背景加一个渐变padding: 1px;.box2 {width: 100%;height: 100%;background-color: #FFF;}}
}
- 这个当border 有弧度的时候看起来会有点奇怪，所以可以反着来
{.box1 {border: 1px solid transparent;background-clip: padding-box; // 裁剪背景到边框以内，这样下面就能露出边框的颜色background-color: #FFF;border-radius: 4px;.box2 {z-index: -1; //把上面的放到下面background: linear-gradient(180deg, #F0F1F5 0%, #FFF 100%); // 背景加一个渐变border-radius: inherit;width: 100%;height: 100%;}}
}
- 使用
border-image
hieght: 100px;width: 100px;background: linear-gradient(180deg, #F0F1F5 0%, #FFF 100%); // 背景也加一个渐变border: 1px solid; //这个是必须的不然边框都没有//边框渐变 起始色号 中间色号 结尾色号 border-image: linear-gradient(rgba(30, 93, 255, 0.35),#FFF,rgba(30, 93, 255, 0.35)) 1;
- 这个参数有个限制，ie10 及以下浏览器不支持
拓展：
- background-clip 有3个属性，border-box：整个div 范围以内，padding-box：border 范围以内，所以上面可以裁剪留下边框的部分，content-box：内容以内，就padding 啥的都算上，都裁剪掉，还有一个特殊的，text，这个只有chrome 里有用，不过这玩意贼牛逼，可以裁剪到文字级别