UWInfo Blog
發表新文章
[Join] | [忘記密碼] | [Login]
搜尋

搜尋意見
文章分類-nelson
[所有文章分類]
  • ASP.NET (0)
  • ASP.NET2.0 (0)
  • ASP.NET4.0 (0)
  • JavaScript (2)
  • jQuery (0)
  • FireFox (0)
  • UW系統設定 (0)
  • SQL (0)
  • SQL 2008 (0)
  • mirror (0)
  • SVN (0)
  • IE (1)
  • IIS (0)
  • IIS6 (0)
  • 閒聊 (0)
  • W3C (2)
  • 作業系統 (2)
  • C# (0)
  • CSS (7)
  • FileServer (0)
  • HTML 5 (1)
  • CKEditor (0)
  • UW.dll (0)
  • Visual Studio (0)
  • Browser (3)
  • SEO (0)
  • Google Apps (0)
  • 網站輔助系統 (0)
  • DNS (0)
  • SMTP (0)
  • 網管 (1)
  • 社群API (0)
  • SSL (0)
  • App_Inventor (0)
  • URLRewrite (0)
  • 開發工具 (0)
  • JSON (0)
  • Excel2007 (0)
  • 試題 (0)
  • LINQ (0)
  • bootstrap (0)
  • Vue (1)
  • IIS7 (0)
  • foodpanda (0)
  • 編碼 (0)
  • 資安 (0)
  • Sourcetree (0)
  • MAUI (0)
  • CMD (1)
  • my sql (0)
所有文章分類
[nelson的分類]
  • ASP.NET (48)
  • ASP.NET2.0 (15)
  • ASP.NET4.0 (34)
  • JavaScript (49)
  • jQuery (26)
  • FireFox (4)
  • UW系統設定 (3)
  • SQL (39)
  • SQL 2008 (25)
  • mirror (4)
  • SVN (4)
  • IE (9)
  • IIS (20)
  • IIS6 (1)
  • 閒聊 (7)
  • W3C (6)
  • 作業系統 (9)
  • C# (24)
  • CSS (12)
  • FileServer (1)
  • HTML 5 (11)
  • CKEditor (3)
  • UW.dll (13)
  • Visual Studio (16)
  • Browser (8)
  • SEO (1)
  • Google Apps (3)
  • 網站輔助系統 (4)
  • DNS (5)
  • SMTP (4)
  • 網管 (11)
  • 社群API (3)
  • SSL (4)
  • App_Inventor (1)
  • URLRewrite (2)
  • 開發工具 (6)
  • JSON (1)
  • Excel2007 (1)
  • 試題 (3)
  • LINQ (1)
  • bootstrap (0)
  • Vue (3)
  • IIS7 (3)
  • foodpanda (2)
  • 編碼 (2)
  • 資安 (3)
  • Sourcetree (1)
  • MAUI (1)
  • CMD (1)
  • my sql (1)
最新回應
標籤
  • 5324
  • ie
  • image
  • 長時間
  • [t]
  • request
  • SVN
  • win
  • 10
  • 0
  • Contains,
  • a
  • free ssl
  • 22
  • 100
  • 906
  • XHbB5sz4
  • 36
  • C
  • db
  • deferred
  • SQL
  • 16
  • 0KeeTeamex
  • [U2]
  • Ubuntu
  • Table
  • 3378
  • 378
  • 4983
  • ef
  • free
  • template
  • MSkvKiovYW
  • 14,
  • CK
  • iis
  • 問題
  • sp_
  • JPEG
  • 3685
  • http error
  • batch
  • sql 權限
  • button
  • orm
  • Active
  • egs
  • wKFpHE57
  • 384
在頁面上呈現 圓形圖片加外框的小技巧
HTML:

<ul class="aaa">
<li><img src="http://placehold.it/150x150" /></li>
</ul>

<ul class="bbb">
<li><div><img src="http://placehold.it/150x150" /></div></li>
</ul>


CSS:
.aaa li{
display: inline-block;
width: 160px;
}

.aaa li img{
width: 150px;
border: 5px solid #ececec;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}


CSS:
.bbb li{
display: inline-block;
width: 160px;
}
​.bbb li div{
width: 150px;
padding: 5px;
background: #ececec;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.bbb li img{
width: 150px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}


​


Safari OUTPUT:

aaa:



bbb:




 

nelson, 2014/11/10 下午 03:48:03
文章分類:CSS
Bike, candice, darren, frank, 瞇瞇, Reiko 已閱讀.
意見
No Data.
Comment:
*Nickname:
E-mail:
Blog URL:
  • *意見內容
  • 預覽
#Nickname#
2014/11/10 下午 03:48:03
#CommentContent#
*請輸入驗證碼: 看不懂,換張圖
 
~ Uwinfo ~