[CSS] 於圖片建立相片效果

以前設計網頁時, 若圖片須要制造相片效果, 則須要利用修圖軟件加工, 後來隨著CSS 技術日漸成熟以及IE 的式微, 現在已經可以從CSS 層面著手. 方法如下:

HMTL:

<ul class="learn">
     <li class="thumbnaile"><img id="portrait" src="http://lorempixel.com/300/300/nature" class="stretch" /></li>
</ul>

CSS:

img {
    // 相框顏色.
    background-color: #fff; 
    // 相框闊度.
    padding: 10px;
    // 相片陰影位置及顏色.
    box-shadow: 10px 10px 5px #888888;
    // 若想邊框圓潤, 可以加入.
    border-radius: 10px;
}