提到圖檔效果，小夥伴們可能會想到美圖秀秀，ps等，這些軟體都是款非常不錯的照片處理軟體，包括常用的：黑白，增強，高斯，高對比，夜視，老照片和鉛筆畫等等。不管你是否是專業的 照片拍攝人員，我們都可以通過照片處理軟體輕松實作自己想要的照片效果。這篇部落格，小編将繼續來總結CSS+DIV的其她效果來進行分析，有興趣的小夥伴可以點選以下連結，了解小編之前講解過的關于CSS的一些基礎知識：
上篇部落格，小編主要講解了有關段落的知識，這次來講圖檔的效果，我們看是如何控制圖檔顯示的效果。首先，我們來看一張圖：
接下來，小編順着上述圖示的脈絡對各個知識點進行一一講解，在實戰中更好的掌握：
圖檔效果
圖檔邊框
首先，我們來看一段例子的代碼和運作效果：
效果如下所示：
分析一下上面的代碼，border-style:控制線條的樣式（是點畫線還是虛線）；border-color：很顯然就是控制顔色了；border-width：控制邊框的粗細程度。同時，border控制邊框的時候，不但可以采用代碼裡邊那樣的方式，同時我們可以把所有的代碼合成一句，我們可以這麼寫，代碼和運作效果如下所示：
這樣就變的很簡潔了，我們看看效果：
border還有一個比較強大的功能就是能單獨修改某一條邊框，比如我們這樣寫代碼，會有怎樣的顯示效果nie:
顯示效果如下：
編這樣更友善我們的設計，接着，我們一起來看一下圖檔的縮放，例子代碼和運作效果如下所示：
分析一下上面的代碼，代碼中的百分之五十表示目前這個圖檔的寬度相對于他的父元素body的寬度為百分之五十，也就是說她為整個浏覽器的寬度的一半。她可以保證不同的浏覽器不會因為她的變化而使得整個網頁發生變化，她永遠保持着跟浏覽器一個相對的寬度。圖檔效果如下所示：
圖檔縮放
圖檔對齊方式
橫向對齊
橫向對齊和縱向對齊兩方面，我們先看橫向對齊：我們采用了text-align來實作這個效果，看看代碼和顯示效果：
效果如下：
縱向對齊不像橫向對齊那樣，縱向對齊數值很多，我們把這些值進行了一一對比，我們看那代碼：
運作效果如下：
圖文混排
文字環繞：我們從代碼出發：
我們采用了首字放大的效果，圖文混排的顯示效果，圖檔和文字進行了很好的混排，這個跟word的圖文混排的顯示是一樣的。我們再回到看代碼，我們看的出來，文字環繞圖檔采用的效果與首字放大是一樣的，都采用了float:left。其實相當于将文字看成一張圖檔或者是将圖檔看成文字，同樣采用首字下沉。
小編寄語：該博文，小編主要簡單的總結了一下CSS中圖檔設定的效果，總共分為三個大塊，包括圖檔樣式，圖檔對齊，圖文混排，其中圖檔樣式包括圖檔的邊框效果和圖檔的縮放效果，border-style:控制線條的樣式（是點畫線還是虛線）；border-color：很顯然就是控制顔色了；border-width：控制邊框的粗細程度，以及圖檔的橫向對齊和縱向對齊，還有圖文混排，這些小的細節方面的知識，還需要我們在代碼中加以實踐，方能更好的掌握這些知識，BS學習，未完待續......