简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
前端 - CSS3 box-shadow如何设置，或者用什么方法可以产生图中这样阴影的效果。
高洛峰
高洛峰 2017-04-17 11:49:07
0
2
625

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

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

reply all(2)
巴扎黑
巴扎黑2017-04-17 11:51:07 2 floor

First of all, the method of using shadow is given so that you can adjust various parameters according to the example.
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow is required. The position of the horizontal shadow. Negative values ​​are allowed.
v-shadow required. The position of the vertical shadow. Negative values ​​are allowed.
blur optional. Fuzzy distance.
spread optional. The size of the shadow.
color optional. The color of the shadow. See CSS color values.
inset optional. Change the outer shadow (outset) to an inner shadow.
Then give me a demo for my local test

<!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>

Here transform: rotateZ(3deg); you can try to adjust the rotation angle.
Then box-shadow mainly adjusts the second and third parameters. If it still does not meet the expected effect, you can change the hexadecimal color to the rgba translucent color. The effect can be achieved
Hope to adopt it.

Like +0
Add Reply
阿神
阿神2017-04-17 11:51:07 1 floor

transform + box-shadow

If that doesn’t work

You can try filter: drop-shadow()

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！