CSS设置图片样式 图片边框、图片大小、图片样式基础

网页中的图片可以传递更丰富的信息，提升浏览者的审美感受，使用CSS定义图片样式，是网站设计的一项重要工作，这篇文章就来介绍一下如何设置图片边框、图片大小？或者可以参考：CSS盒子模型的边框属性。

CSS设置图片边框

CSS使用border属性来设置图片的边框，它可以分为以下几种属性：

• border-style：边框线的形状，属性值有sold实线、dashed虚线、dotted点线、double双线。
• border-width：边框线的宽度。
• border-color：边框线的颜色。
• border-left-style：左边框线的形状。
• left、right、top、bottom同理，可分别设置。
• border：形状 宽度 颜色 可按照顺序简写

CSS设置图片大小

CSS中图片的大小使用height和width属性就可以，一般只设置一个，等比缩放。属性值可以为像素px，也可以使用百分比，需要注意的是，百分比不是相对于原图而言，是相对于父标签的，这里不再演示，比较简单！

CSS设置图片对齐方式

图片可以使用text-align属性设置水平方式对齐，但是需要注意只能对图片的父标签操作，对图片本身没有效果！

图片可以使用vertical-align属性设置垂直方式对齐，一般用在文本和图像结合使用的时候，属性值有baseling（默认）、top（文字与图片顶部对齐）、bottom（文字与图片底部对齐）、middle（文字与图片中间对齐）、text-bottom、super（文字上标与图片底部对齐）、sub（文字下标与图片底部对齐）、30px（文字和图片垂直方向距离30px，可取负值）。

图片可以使用opacity属性进行透明度设置，取值在0到1之间，需要对不同的浏览器设置兼容性：

img{opacity:0.3;  /*标准写法*/
     filter:alpha(opacity=30);  /*IE早期取值为0到100*/
    -moz-opacity:0.3;  /*火狐浏览器取值为0到1*/}

CSS设置图片圆角

CSS使用border-radius属性设置图片圆角，属性值可以为像素px，同样需要对浏览器设置兼容性：

img{
    border-radius:4px; /*标准写法*/
    -moz-border-radius:4px;/*火狐浏览器*/
}