台州网站建设公司.,wordpress 博客多人,宁波电子商务网站建设,wordpress+资源分享需求#xff1a;
普通的div 边框不好看#xff0c;做一个渐变色
进程#xff1a;
最简单的当然是做一个内部是白色的边框是渐变色的图#xff0c;然后使用 background: url(back.jpg)#xff0c;这样看起来就像是做了一个渐变的边框如果做不了图#xff0…需求
普通的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-boxborder 范围以内所以上面可以裁剪留下边框的部分content-box内容以内就padding 啥的都算上都裁剪掉还有一个特殊的text这个只有chrome 里有用不过这玩意贼牛逼可以裁剪到文字级别
