css3各种阴影方向的写法

最新推荐文章于 2024-06-22 17:43:07 发布

GuoyeZhang

最新推荐文章于 2024-06-22 17:43:07 发布

阅读量405

点赞数 4

分类专栏： +Frontend Practices/前端实战文章标签： css3 前端 css

本文链接：https://blog.csdn.net/aa390481978/article/details/137627846

版权

+Frontend Practices/前端实战专栏收录该内容

49 篇文章 1 订阅

订阅专栏

css3各种阴影方向的写法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>box-shadow-all</title>
</head>
<style>
  .shadow div {
    float: left;
    margin: 50px 120px;
    width: 100px;
    height: 100px;
    border: 2px solid yellowgreen;
    text-align: center;
    line-height: 100px;
  }
  
  .top {
    box-shadow: 0px -5px 10px -5px red;
  }
  
  .right {
    box-shadow: 5px 0 10px -5px red;
  }
  
  .bottom {
    box-shadow: 0 5px 10px -5px red;
  }

  .left {
    box-shadow: -5px 0 10px -5px red;
  }

  .left-top {
    box-shadow: -5px -5px 10px -4px red;
  }

  .right-top {
    box-shadow: 5px -5px 10px -4px red;
  }

  .right-bottom {
    box-shadow: 5px 5px 10px -4px red;
  }
  
  .left-bottom {
    box-shadow: -5px 5px 10px -4px red;
  }

  .no-top {
    /* .left-bottom, .right-bottom 组合 */
    box-shadow: -5px 5px 10px -4px red, 5px 5px 10px -4px red;
  }

  .no-right {
    /* .left-top, .left-bottom 组合 */
    box-shadow: -5px -5px 10px -4px red, -5px 5px 10px -4px red;
  }

  .no-bottom {
    /* .left-top, .right-top 组合 */
    box-shadow: -5px -5px 10px -4px red, 5px -5px 10px -4px red;
  }
  
  .no-left {
    /* .right-bottom, .right-top 组合 */
    box-shadow: 5px 5px 10px -4px red, 5px -5px 10px -4px red;
  }
</style>

<body>
  <div class="shadow">
    <div class="top">顶部阴影</div>
    <div class="right">右部阴影</div>
    <div class="bottom">底部阴影</div>
    <div class="left">左边阴影</div>
    <div class="left-top">左上阴影</div>
    <div class="right-top">右上阴影</div>
    <div class="right-bottom">右下阴影</div>
    <div class="left-bottom">左下阴影</div>
    <div class="no-top">无上阴影</div>
    <div class="no-right">无右阴影</div>
    <div class="no-bottom">无下阴影</div>
    <div class="no-left">无左阴影</div>
  </div>
</body>

</html>