찾다

 >  Q&A  >  본문

前端 - CSS3 box-shadow如何设置,或者用什么方法可以产生图中这样阴影的效果。

例如图片中这样的阴影如何实现, 因为p是长方形的,设置阴影就不是这个效果了,直接在图片上设置也尝试过,都不是图中这样的阴影,求有什么方法可以实现?

高洛峰高洛峰2767일 전633

모든 응답(2)나는 대답할 것이다

  • 巴扎黑

    巴扎黑2017-04-17 11:51:07

    首先给出阴影的使用方法方便你根据例子调节各个参数
    box-shadow: h-shadow v-shadow blur spread color inset;
    h-shadow必需。水平阴影的位置。允许负值。
    v-shadow必需。垂直阴影的位置。允许负值。
    blur 可选。模糊距离。
    spread 可选。阴影的尺寸。
    color 可选。阴影的颜色。请参阅 CSS 颜色值。
    inset 可选。将外部阴影 (outset) 改为内部阴影。
    然后给一个我本地测试的demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <p class="box"></p>
    </body>
    <style>
      body {
        background-color: #d9edf7;
      }
    
      .box {
        width: 300px;
        height: 100px;
        margin: 100px;
        background-color: #666e86;
        transform: rotateZ(3deg);
    
        box-shadow: 0 5px 10px #888888;
      }
    </style>
    </html>

    这里 transform: rotateZ(3deg); 可以试着调节旋转角度。
    然后 box-shadow 主要是调节第二和第三个参数,如果还是和预期的效果不符,你可以将十六进制的颜色改成rgba 的半透明色。即可达到效果
    望采纳。

    회신하다
    0
  • 阿神

    阿神2017-04-17 11:51:07

    transform + box-shadow

    不行的话

    可以尝试 filter: drop-shadow()

    회신하다
    0
  • 취소회신하다