前端 - CSS3 box-shadow如何设置，或者用什么方法可以产生图中这样阴影的效果。
问题描述
例如图片中这样的阴影如何实现， 因为p是长方形的，设置阴影就不是这个效果了，直接在图片上设置也尝试过，都不是图中这样的阴影，求有什么方法可以实现?
问题解答
回答1：首先给出阴影的使用方法方便你根据例子调节各个参数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 的半透明色。即可达到效果望采纳。
回答2：transform + box-shadow
不行的话
可以尝试 filter: drop-shadow()
相关文章：
网公网安备