前端 - CSS3 box-shadow如何设置，或者用什么方法可以产生图中这样阴影的效果。
本文介绍了前端 - CSS3 box-shadow如何设置，或者用什么方法可以产生图中这样阴影的效果。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
例如图片中这样的阴影如何实现， 因为div是长方形的，设置阴影就不是这个效果了，直接在图片上设置也尝试过，都不是图中这样的阴影，求有什么方法可以实现?
解决方案
首先给出阴影的使用方法方便你根据例子调节各个参数
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>
<div class="box"></div>
</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 的半透明色。即可达到效果
望采纳。
这篇关于前端 - CSS3 box-shadow如何设置，或者用什么方法可以产生图中这样阴影的效果。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
