600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > css左侧投影_CSS3------box-shadow 即单边阴影效果设置

css左侧投影_CSS3------box-shadow 即单边阴影效果设置

时间:2022-08-03 00:25:59

相关推荐

css左侧投影_CSS3------box-shadow 即单边阴影效果设置

box-shadow修改元素的阴影效果要方便得多,因为box-shadow可以修改六个参数,得到不同的效果。下面结合一些简单的案例来对box-shadow属性进行演示说明。

1.单边阴影效果

定义元素的单边阴影效果和调协border的单边边框颜色是相似的,例如:

1

2

3

4

5

Title

6

7 .box-shadow{

8 width:200px;

9 height:100px;

10 border-radius:5px;

11 border:1px solid #ccc;

12 margin:20px;

13 }

14 .top{

15 box-shadow:0 -2px 0 red;

16 }

17 .right{

18 box-shadow:2px 0 0 green;

19 }

20 .bottom{

21 box-shadow:0 2px 0 blue;

22 }

23 .left{

24 box-shadow:-2px 0 0 orange;

25 }

26

27

28

29

30

31

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。