利用div+CSS實現與clip相同作用的圖片剪切

　　在看CSS網站布局實錄的時候，發現了一個挺有意思的東西，特記錄在此。

　　我們在網站中引入一張圖片的時候，有時候需要將這張圖片剪切一下，這個時候需要用到CSS中的clip屬性，語法為：clip（上 右 下 左）

　　這樣我們就能剪切一張圖片並顯示了，但是有時候需求卻不僅僅是剪切圖片，而且還要為圖片添加邊框，這里就要動動腦子了。

　　書中介紹的方法是這樣的：在要剪切的圖片外面添加div標簽使其囊括其中，然后設置img的margin屬性為負值，然后再為div添加overflow:hidden，並

設置我們想要剪切圖片后的大小，再為div添加一個邊框，這樣就簡單的完成了任務。

　　舉例如下：

　　首先，我們在網頁中添加一張圖片

<img src = "images/001.jpg" width = "400px" height= "400px" id = "img1"/>

　　然后我們使用clip屬性剪裁圖片

#img1{
    position:absolute;　　　　//要用clip屬性必須設置position為absolute
    clip:rect(10px 300px 300px 20px);
}

　　下面我們使用div+CSS實現與剛才同樣的效果，首先添加html代碼

<div id = "div1">
    <img src= "images/001.jpg" width="400px" height="400px" /> 
</div>

　　然后再為這段代碼添加一些CSS樣式

#div1{
    width: 280px;
    height: 290px;
    overflow: hidden;
}
#div1 img{
    margin-left: -20px;
    margin-top: -10px;
}

這樣就實現了與clip同樣的效果，而且還可以為div添加邊框，看起來就和剪裁過的圖片添加邊框一樣了。