css设置图片效果.ppt

第4章 用CSS设置图片效果 4.1 图片样式 4.1.1 图片边框 img src=“ ” border=“ ” 在CSS中可以通过border-style定义边框的样式,如虚线、实 线或点划线等。 Border-style:dotted/dashed/solid/groove/double等 Border-left-style Border-right-style Border-top-style Border-bottom-style Border-color/border-left-color/…… Border-width/border-top-width/…… 定义CSS时的格式有： Img.test1{ Border-bottom:5px double #ff0000;} Img.test2{ Border-bottom-style:double; Border-bottom-width:5px; border-bottom-color:#ff0000;} 4.1.2 图片缩放 Img{Width:50% } //相对于body的宽度 当拖动浏览器窗口改变其宽度时,图片的大小也会相应的 发生变化. 这里需要注意的是,当仅设置了图片的width属性,而没有 设置height属性时,图片本身会自动等纵横比例缩放,如果只设 了height属性也是一样的道理.只有同时设定Width和height 属性时才会不等比例缩放. Img{width:70%; height:110px} 110px 50% 4.2.2 纵向对齐方式(vertical-align) 1.style=“vertical-align:baseline” 2.style=“vertical-align:bottom” 3.style=“vertical-align:middle” 4.style=“vertical-align:sub” 5.style=“vertical-align:super” 6.style=“vertical-align:text-bottom” 7.style=“vertical-align:text-top” 8. style=“vertical-align:top”