前端 - CSS3 box-shadow如何设置，或者用什么方法可以产生图中这样阴影的效果。
例如图片中这样的阴影如何实现， 因为p是长方形的，设置阴影就不是这个效果了，直接在图片上设置也尝试过，都不是图中这样的阴影，求有什么方法可以实现?
例如图片中这样的阴影如何实现， 因为p是长方形的，设置阴影就不是这个效果了，直接在图片上设置也尝试过，都不是图中这样的阴影，求有什么方法可以实现?
巴扎黑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 的半透明色。即可達到效果
望採納。
