博客園 cnblogs博客 圖片顯示美化 使用CSS給圖片添加圓角陰影


  用了博客園一段時間了,總覺得博客園顯示的圖片不怎么好看,一點都沒有修飾,於是無聊的去找了下CSS美化圖片的代碼。。。

  一開始看中了蘋果官網圖片的美化效果,不過它好像需要加載陰影圖片,而且對圖片的尺寸有要求。這樣不便於以后在博客中直接美化圖片,於是就放棄了陰影效果,只給加了個框。

  昨天在女朋友QQ空間看到了頭像的陰影和圓角效果,覺得還不錯,就直接拿過來美化了。

  使用方法:
  1.將代碼添加到博客設置->通過CSS定制頁面風格

 

CSS定制頁面風格截圖


  2.
選中要美化圖片,單擊編輯器上的插入/編輯 圖片->外觀->類別->value,輸入pzxbc(可以命名為其他類名)

  代碼:

/* pzxbc image css 邊框 陰影 圓角 效果
------------------------
*/
img.pzxbc
{ display:block; padding:7px; border:1px solid #dedede; box-shadow: 0 1px 3px rgba(0,0,0,.3); border-radius: 4px; }

  實際效果:

美女哦









未加CSS的原始圖

 

美女哦

加了CSS的效果圖



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM