css怎么设置阴影效果


当前第2页 返回上一页

是添加两个副元素,然后将两个副元素分别向左扭曲并旋转稍小角度后形成平行四边形,然后遮盖在主元素下面。

【推荐学习:css视频教程】

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

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

.box{

    width: 980px;

    height: auto;

    clear: both;

    overflow: hidden;

    margin: 20px auto;

}

.box li{

    width: 300px;

    height: 210px;

    float: left;

    background: white;

    margin: 20px 10px;

    border: 2px solid #efefef;

    box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;

    position: relative;

}

.box li img{

    display: block;

    width: 290px;

    height: 200px;

    margin: 5px;

}

.box li:before{

    content: '';

    z-index: -1;

    position: absolute;

    width: 90%;

    height: 80%;

    left: 20px;

    bottom: 8px;

    background:transparent;

    box-shadow: 0 8px 20px rgba(0,0,0,0.6);

    transform: skew(-12deg) rotate(-4deg);

}

.box li:after{

    content: '';

    z-index: -1;

    position: absolute;

    width: 90%;

    height: 80%;

    right: 20px;

    bottom: 8px;

    background:transparent;

    box-shadow: 0 8px 20px rgba(0,0,0,0.6);

    transform: skew(12deg) rotate(4deg);

}

以上就是css怎么设置阴影效果的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

vs2015如何编写css文件

css怎么改变div的位置

css text-align属性怎么用

css权重如何计算

css怎么自定义字体样式

css如何取消下划线

css id选择器怎么写

css怎么固定底部不动

css怎么设置全屏背景图片

css ellipsis不起作用怎么办

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




打赏

取消

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

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

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

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

评论

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

    暂无评论...