css如何为div添加阴影效果


本文摘自PHP中文网,作者V,侵删。

本文为大家分享了css为div添加阴影的方法,希望可以帮助到大家。

(相关推荐:CSS教程)

代码实现:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<style type="text/css">

.mydiv{

   width:250px;

   height:auto;

   border:#909090 1px solid;

   background:#fff;

   color:#333;

   filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);

   -moz-box-shadow: 2px 2px 10px #909090;

   -webkit-box-shadow: 2px 2px 10px #909090;

   box-shadow:2px 2px 10px #909090;

}

</style>

  

for IE:

direction 阴影角度 0°为从下往上 顺时针方向

strength  阴影段长度

  

-moz-box-shadow: 2px 2px 10px #909090;

-webkit-box-shadow: 2px 2px 10px #909090;

box-shadow:2px 2px 10px #909090;

  

第一个参数是x轴阴影段长度

第二个参数是y轴阴影段长度

第三个参数是往四周阴影段长度

第四个参数是阴影段颜色

  

div代码:

<div class="mydiv">

    123123213123

</div>

以上就是css如何为div添加阴影效果的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

怎么给css文件改名

css怎么设置文字透明效果

css怎么控制元素隐藏

使用css flexbox构建网站标题

css隐藏移动端滚动条并平滑滚动(代码示例)

css媒体查询有什么用

css 怎么引入图片文件

css nav-index属性怎么用

聊聊css 与 js 是如何阻塞 dom 解析和渲染的

css样式冲突怎么办

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...