84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
例如图片中这样的阴影如何实现， 因为p是长方形的，设置阴影就不是这个效果了，直接在图片上设置也尝试过，都不是图中这样的阴影，求有什么方法可以实现?
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...
首先給出陰影的使用方法方便你根據例子調節各個參數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 的半透明色。即可達到效果望採納。
transform + box-shadow
不行的話
可以試試 filter: drop-shadow()
首先給出陰影的使用方法方便你根據例子調節各個參數
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow必需。水平陰影的位置。允許負值。
v-shadow必需。垂直陰影的位置。允許負值。
blur 可選。模糊距離。
spread 可選。陰影的尺寸。
color 可選。陰影的顏色。請參閱 CSS 顏色值。
inset 可選。將外部陰影 (outset) 改為內部陰影。
然後給一個我本地測試的demo
這裡 transform: rotateZ(3deg); 可以試著調節旋轉角度。
然後 box-shadow 主要是調整第二和第三個參數，如果還是和預期的效果不符，你可以將十六進位的顏色改成rgba 的半透明色。即可達到效果
望採納。
transform + box-shadow
不行的話
可以試試 filter: drop-shadow()