欢迎光临
我们一直在努力

微信小程序——多重边框效果

大多数人都用过box-shadow来生成投影,我们可以通过设置模糊值(第三个参数)为零,扩张半径(第四个参数)为一个正值来实现一个实线边框,效果等同于border实现的边框效果。

background: yellowgreen;
box-shadow: 0 0 0 10px #655;


box-shadow还有一个好处是,它支持逗号分隔语法,我们可以创建任意数量的投影,需要注意的是,box-shadow是层层叠加的,第一层投影位于最顶层,依次类推。因此,你需要按此规律调整扩张半径,比如在前面代码中,我们想在外圈再加一道5px的外框,那就需要制定扩张半径的值为15px(10px+5px),依次类推,根据box-shadow的这个特性,我们可以轻松的实现多重边框效果:

background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);

赞(0) 打赏
未经允许不得转载:半醉人间 » 微信小程序——多重边框效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏