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 ，但是這個屬性只針對文字有效，對圖片、多媒體檔案，它們都沒效果的，所以我們需要將該屬性定義在父級元素上面來實現整水平移動。

例如：

<p style="text-align: center"><img src="../Image/phone.png" height="27" width="19"/></p>

2、垂直對齊

垂直對齊詳見段落屬性vertical-align

文字環繞（float屬性）

網頁中，文字環繞圖片的情況非常多，那麼如何對針對文字和圖片進行排版就非常的重要，因為一個好的圖文結合，可以起到一種相得益彰的效果。如果要做到文字環繞著圖片出現，那麼就需要使用float屬性。

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。

如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。

註釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。

屬性值：

圖片邊框背景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 屬性值}

屬性值：