DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> css3圓形頭像(當圖片寬高不相等時)
css3圓形頭像(當圖片寬高不相等時)
編輯:CSS特效代碼     

1。圖片寬高相等,width:300px; height:300px; 把他變成寬高100px的圓形頭像

img{width:100px; height:100px; border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;}

2。圖片寬高不相等 width:400;height:600px;

利用百分比讓頭像響應式

解決方式:給圖片外面先包圍一個div,先把div變成圓角然後讓圖片百分百的填充

<div class="imgheadborder">
<img class="imghead" src="images/thumsb/thumsb_pic2.jpg" />
</div>

css代碼:

.imgheadborder{ width:10.9%; padding-top:10.9%; margin-right:2.8%; border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%; position:relative;}
.thumsbcount .imghead{position:absolute;left:0px;top:0px; border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%; width:100%;height:100%;z-Index:-1;}

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved