CSS 製作圓形圖片 (CSS image circle shape)

CSS 把圖片裁切成圓形其實很簡單,只要把CSS直接加在圖片上就可以了。
<PREVIEW>
circle
先把圖片裁成正方形,再套用下面的CSS就可以了
如果每一張圖片尺寸都不一樣的話,border-radius的值直接寫50%就可以了
但要注意因為是50%,所以如果圖片不是正方形,那圓角之後就會變橢圓形喔~
<CSS>

img.square {
	width: 100px;
	border-radius: 50%;
	border: 1px solid rgba(255,0,0,1.00);
}

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *