css美化图片

CSS美化图像

网页中，可能存在大量的图片，但是大家又没有对那些图片进行修饰的话，网页会显示的非常凌乱，这个时候就需要我们大家通过CSS来统一的管理我们的图片，比如：给图片加边框，给图片设置宽高，以及一些其他效果。

图片边框

如果需要在网页中,针对图片进行边框设置,只需要在图片的样式中,添加border属性即可。当然也可以用border一些衍生属性,比如: border-widh , border-style, border-color,还可以继续使用前面这些属性的衍生属性，例如： border_left_widh......

图片缩放

在网页中，如果大量的图片都是按照自身的宽度和高度来进行显示的话，整个页面会非常的丑，所以通常情况下，我们都需要对图片进行统一的高宽设置，但是如果对图片的设置不恰当，也会导致图片变形或失真.......

设置宽度，我们需要使用width属性；设置高度，我们需要使用height属性。

如：style="width: 150px;height: 30px"

除了width和height属性可以设置图片的高宽之外，我们还可以使用max-width、max-height来设置图片的最大高宽，这两个属性任选其一，且只能选择其中一个，它是按照原图片同比例缩放；如果该图片大小没有超过最大值，那么就按照原图大小显示，原图大小超过了这个最大值，那么按照最大值显示。

图片对齐

1、水平对齐

图片水平对齐，使用的属性是text-align ，但是这个属性只针对文字有效，对图片、多媒体文件，它们都没效果的，所以我们需要将该属性定义在父级元素上面来实现整水平移动。

例如：

2、垂直对齐

垂直对齐详见段落属性vertical-align

*文字环绕（**float属性*）

网页中，文字环绕图片的情况非常多，那么如何对针对文字和图片进行排版就非常的重要，因为一个好的图文结合，可以起到一种相得益彰的效果。如果要做到文字环绕着图片出现，那么就需要使用float属性。

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

属性值：

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

*图片边框背景**border-image*

如果我们需要给某一个图片,添加外边框,然后又想给外边距使用图片来作为背景时,可以使用border-image该属性.

border-image 属性是一个简写属性，用于设置以下属性：

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

如果省略值，会设置其默认值。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

语法：

{border_image：none | url（·····） width height 属性值}