免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
Board logo

標題: [版型教學] 分享一款头像圆角代码,加阴影立体效果。 [打印本頁]

作者: 无界    時間: 2016-12-21 20:48     標題: 分享一款头像圆角代码,加阴影立体效果。

效果如图:
QQ截图20161221203848.jpg
将下边代码放到css_common模板最下边即可。
  1. .postauthor .avatar a img {
  2.     width: 100%;
  3.     border-radius: 50%;
  4.     border: 5px solid #FFF;
  5.     box-shadow: 0px 6px 20px 0px rgba(0,0,0,.19),0px 8px 16px 0px rgba(0,0,0,.2);
  6. }
複製代碼


圖片附件: QQ截图20161221203848.jpg (2016-12-21 20:48, 6.76 KB) / 下載次數 548
http://www.sclub.com.tw/discuz/attachment.php?aid=76601&k=4d4e241943696a8e63980dc8c87d17fc&t=1714309271&sid=e581SP


作者: leisurema    時間: 2016-12-21 21:12

回復 1# 无界



收到了,辛苦無界大人啊!
作者: 21648069    時間: 2016-12-21 23:48

本帖最後由 21648069 於 2016-12-22 00:05 編輯

回復 1# 无界

請問可以修改成能夠套用到 onmouseover 上面嗎?
也就是鼠標移到頭像上面的時候,圓角依舊維持,不會恢復成四角形

很需要這個代碼
作者: 无界    時間: 2016-12-22 00:21

回復 3# 21648069


    再加一句
  1. .popavatar a img {border-radius: 50%;}
複製代碼

作者: 21648069    時間: 2016-12-22 02:03

回復 4# 无界

感謝大神,幫了大忙
作者: 4rphotoclub    時間: 2016-12-22 03:01

看似很有效果,等我又试下效果是如何!
作者: 哥哥    時間: 2016-12-23 16:37

无界大大你太狂了




歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://www.sclub.com.tw/discuz/) Powered by Discuz! 7.2