84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
例如图片中这样的阴影如何实现, 因为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()