css3中怎么设置阴影,CSS3 box-shadow如何设置,或者用什么方法可以产生图中这样阴影的效果。...

首先给出阴影的使用方法方便你根据例子调节各个参数

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow必需。水平阴影的位置。允许负值。

v-shadow必需。垂直阴影的位置。允许负值。

blur 可选。模糊距离。

spread 可选。阴影的尺寸。

color 可选。阴影的颜色。请参阅 CSS 颜色值。

inset 可选。将外部阴影 (outset) 改为内部阴影。

然后给一个我本地测试的demo

Document

body {

background-color: #d9edf7;

}

.box {

width: 300px;

height: 100px;

margin: 100px;

background-color: #666e86;

transform: rotateZ(3deg);

box-shadow: 0 5px 10px #888888;

}

这里 transform: rotateZ(3deg); 可以试着调节旋转角度。

然后 box-shadow 主要是调节第二和第三个参数,如果还是和预期的效果不符,你可以将十六进制的颜色改成rgba 的半透明色。即可达到效果

望采纳。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值