欢迎来到天天文库
浏览记录
ID:34783841
大小:130.18 KB
页数:3页
时间:2019-03-10
《用css设置图片效果》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库。
1、用CSS设置图片效果一、图片样式1,图片边框Java代码 1.img.test1 { 2. border-style: dotted; /*点划线*/ 3. border-color: #FF9900; /*边框颜色*/ 4. border-width: 5px; /*边框粗细*/ 5.} 6.img.test2 { 7. border-style: dashed; /*虚线*/ 8. border-color: blue; /*边框颜色*/ 9. bo
2、rder-width: 2px; /*边框粗细*/ 10.} 11.img.test3 { 12. border-style: dotted; /*左边框点划线*/ 13. border-left-color: #FF9900; /*左边框颜色*/ 14. border-left-width: 5px; /*左边框粗细*/ 15. border-right-style: dashed; /*右边框虚线*/ 16. border-right-color
3、: #33CC33; /*右边框颜色*/ 17. border-right-width: 2px; /*右边框粗细*/ 18. border-top-style: solid; /*上边框实线*/ 19. border-top-color: #CC00FF; /*上边框颜色*/ 20. border-top-width: 10px; /*上边框粗细*/ 21. border-bottom-style: groove; /*下边框3D凹槽*/ 22. bord
4、er-bottom-color: #666666; /*下边框颜色*/ 23. border-bottom-width: 15px; /*下边框粗细*/ 24.} 25.img.test4 { 26. border: 5px double #FF00FF 27.} img.test1{border-style:dotted;/*点划线*/border-color:#FF9900;/*边框颜色*/border-width:5px;/*边框粗细*/}img.test2{border-style:dashe
5、d;/*虚线*/border-color:blue;/*边框颜色*/border-width:2px;/*边框粗细*/}img.test3{border-style:dotted;/*左边框点划线*/border-left-color:#FF9900;/*左边框颜色*/border-left-width:5px;/*左边框粗细*/border-right-style:dashed;/*右边框虚线*/border-right-color:#33CC33;/*右边框颜色*/border-right-width:2px;/*右边
6、框粗细*/border-top-style:solid;/*上边框实线*/border-top-color:#CC00FF;/*上边框颜色*/border-top-width:10px;/*上边框粗细*/border-bottom-style:groove;/*下边框3D凹槽*/border-bottom-color:#666666;/*下边框颜色*/border-bottom-width:15px;/*下边框粗细*/}img.test4{border:5pxdouble#FF00FF}第4种就是将各个属性值合并2,图片缩
7、放Java代码 1.img.test1 { 2. width: 50%; /*相对宽度*/ 3. height: 300px; /*绝对高度*/ 4.} img.test1{width:50%;/*相对宽度*/height:300px;/*绝对高度*/}二、图片的对齐1,横向对齐Java代码 1.
8、ter;">
此文档下载收益归作者所有