简体中文(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
570

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

高洛峰
高洛峰

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

répondre à tous(2)
巴扎黑
巴扎黑2017-04-17 11:51:07 2 plancher

首先给出阴影的使用方法方便你根据例子调节各个参数
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 的半透明色。即可达到效果
望采纳。

Comme +0
Ajouter une réponse
阿神
阿神2017-04-17 11:51:07 1 plancher

transform + box-shadow

不行的话

可以尝试 filter: drop-shadow()

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！