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

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

高洛峰
高洛峰

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

全部回覆(2)
巴扎黑
巴扎黑2017-04-17 11:51:07 2樓

首先給出陰影的使用方法方便你根據例子調節各個參數
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 1樓

transform + box-shadow

不行的話

可以試試 filter: drop-shadow()

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！