如何理解CSS的图文混排和图像签名和多图拼接以及图片特效

效果图：

二图像签名

1.     

2.     

3.     

4.     

5.     

6.    

7. #test {   

8. border:#FF00FF solid 2px;    

9. width:720px;    

10. position:absolute;/*让文字不会脱离图片*/    

11. top:50px;    

12. }    

13. img {    

14. width:720px;    

15. height:480px;    

16. }   

17. #text {   

18. color:#0000FF;    

19. font-size:24px;    

20. font-family:"华文隶书";    

21. position:absolute;    

22. bottom:50px;    

23. right:50px;    

24. }    

25.     

26.     

27.     

28.     

29.     

30.     

31.     

32.     

33. 国民女神————高圆圆    

34.     

35.     

36.     

37.    

效果图：

三多图拼接

1.     

2.     

3.     

4.     

5.     

6.    

7. #box {   

8. margin:auto;    

9. height:600px;    

10. width:690px;    

11. }    

12. .test {    

13. height:300px;    

14. width:690px;    

15. }    

16. .img {    

17. height:300px;    

18. width:230px;    

19. float:left;    

20. }    

21. img {    

22. height:300px;    

23. width:230px;    

24. }    

25.     

26.     

27.     

28.     

29.     

30.     

31.     

32.     

33.     

34.     

35.     

36.     

37.     

38.     

39.     

40.     

41.       

     效果图：   

           四图片特效    

        我们在做这个实例之前先来简单的介绍CSS3新增的样式属性：box-shadow(边框阴影)和transform(旋转特效)。在 学习CSS的时候学到了很多的盒子模型的样式属性，加以结合也会做出很好的效果。

详细的看一看：CSSbo
.shadow属性和CSStransform属
.()边框阴影属性：box-shad
.设置元素的阴影，其实没有边框也可以添加阴影
.语法规
.box-shadow:apbpcp#xxxxx
.box-shadow:apbpcprgb(,,,.
.apx表示水平方向的移动；bpx表示竖直方向的移动；cpx表示阴影的模糊距离；最后面的为颜色
.()旋转特效属性：transfo
.设置元素的旋转,向元素应用D或D转换。该属性允许我们对元素进行旋转、缩放、移动或倾
.transform:rotate(angle单位为deg)定义D旋转在参数中规定角度,angle表示角

1.     

2.     

3.     

4.     

5.     

6.     

7. body {    

8. margin:30px;    

9. background-color:#CCCCCC;    

10. }    

11. div.polaroid {    

12. width:294px;    

13. padding:10px;    

14. margin:10px;    

15. border:1px solid #BFBFBF;    

16. background-color:#FFFFFF;    

17. box-shadow:10px 10px 10px #999999;/*图片阴影的设置*/    

18. }    

19. div.rotate_left {    

20. float:left;    

21. transform:rotate(8deg);/*图片向右倾倒*/    

22. }    

23. div.rotate_right {    

24. float:left;    

25. transform:rotate(-8deg);/*图片向左倾倒*/    

26. }    

27.     

28.     

29.     

30.     

31.     

32. 上海鲜花港的郁金香，花名：Ballade Dream。

        

33.     

34.     

35.     

36. 2010年上海世博会，中国馆。

        

37.     

38.     

39.    

效果图：

上述就是小编为大家分享的如何理解CSS的图文混排和图像签名和多图拼接以及图片特效了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。