CSS 中的 clip-path 用法範例

CSS3 裡面的 clip-path 可用來剪裁圖片，下面是個簡單的範例

HTML:
<img src="http://lh5.ggpht.com/_0tibDhJQ0Og/S6b6TkEMaNI/AAAAAAAARXg/Elrs6s7s0ds/s800/ar025.jpg"></img>

CSS:
img {
width: 280px;
height: 280px;
background: #ff90ff;
clip-path: inset(Top Right Bottom Left);   // Top為從上往下剪裁的方向，依此類推，使用百分比做為縮剪的比率 ex:clip-path: inset(40% 40% 50% 10%)
}

// 如果要剪裁成圓形，可改為下列語法
clip-path: circle(半徑大小 at X-alias Y-alias);  // ex: circle(50% at 50% 50%)

/* Center the demo */
html, body { height: 100%; }
body {
display: flex;
justify-content: center;
align-items: center;
}