css3----盒子阴影巧妙运用

最新推荐文章于 2024-08-31 09:24:27 发布

weixin_44247693

最新推荐文章于 2024-08-31 09:24:27 发布

阅读量169

点赞数

文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_44247693/article/details/107331739

版权

盒子阴影的几种用法

1.可以做边框

 .box {
     margin: 100px auto;
     width: 200px;
     height: 300px;
     background-color: #ccc;
     box-shadow: 0 0 0 4px red;
 }    
 注:盒子阴影只写阴影大小尺寸和颜色可以显示边框

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S2B在这里插入图片描述CV3BL-1594691817632)(C:\Users\Dear\Desktop\1.png)]$

2.可以做三个方块(用一个div)

.box {

  margin: 100px auto;
  width: 200px;
  height: 300px;
  background-color: #ccc;
  box-shadow: 50px 0 0 0 red, -50px 0 0 0 green;
  注:盒子阴影可写多个值,用逗号隔开

}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FZpzHe0B-1594691817635)(2.png)]

3.可以让方块变高时不抖动

不用盒子阴影时浮动的盒子会向下变高

  li {
      float: left;     
      width: 10px;
      height: 10px;
      margin-right: 10px;
      background-color: #000;
      list-style: none;
  }
  
  li:hover {
      height: 20px;
      background-color: aqua;
  }

图片转存失败,源站可

为什么会向下变高? 因为浮动的元素顶部对齐

这时用盒子阴影就可以解决这个问题

  li {
      float: left;
      width: 10px;
      height: 10px;
      margin-right: 10px;
      background-color: #000;
      list-style: none;
  }
  
  li:hover {
      box-shadow: 0 -10px 0 0 aqua;  只有这行代码改变
      background-color: aqua;
  }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-txHQH0Cz-1594691817639)(4.png)]