CSS完成半全透明边框与多种边框的情景剖析

日期:2021-02-28 类型:科技新闻 

关键词:在线编辑图片,什么软件可以抠图,在线图片,p图软件电脑版,在线抠图

情景1:

完成半全透明边框:

因为CSS款式的默认设置个人行为,情况色的3D渲染范畴是 content+padding+border。

半全透明边框被主调色危害, 完成的实际效果为

处理计划方案:

应用background-clip 特性要求情况的绘图地区,使得绘图地区仅限定在content+padding。

Div {
border:10px solid rgba(0,0,0,.5);
background: lightblue;
background-clip: padding-box;
}

填补: background-clip 兼容问题IE6⑻, Opera10

情景2:

完成多种边框:

计划方案1: 应用box-shadow来转化成多种投射

编码与实际效果以下:

div {
background:#c3e6f4;
box-shadow:0 0 0 15px #b7dae6,0 0 0 30px #cce2ea;
}

计划方案2:盒子边框融合描边特性(outline)

特性: 只能完成两重边框,更为灵便,能应用虚线等实际效果

编码与实际效果以下:

div {
border: 6px dashed #c3f4ec;
outline: 10px solid #d9faf6;
background-clip: padding-box;
}

总结

以上所述是网编给大伙儿详细介绍的CSS完成半全透明边框与多种边框的情景剖析,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!