使用CSS3為圖片自動添加圓角 – 畅想资源

网站最后更新日期：2022年3月25日

欢迎大家来到畅想资源 AREFLY.COM！个人网站（中）个人网站（EN）更多联络方式

×

暢想資源的Facebook粉絲專頁

使用CSS3為圖片自動添加圓角

8 月012013

作者：超级efly 发布：2013-08-01 12:09 分类：网络阅读：13,361

現今越來越多瀏覽器開始支持CSS3，所以今天「暢想資源」就來教大家如何使用CSS3為你的圖片自動添加圓角，讓你的圖片看起來更加圓滑！

教程

1、把下列代碼添加進入你的 <style> 表情內（對於WordPress來說就是「樣式表 (style.css)」文件內）

p img{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

1

2

3

4

5

p img{

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

2、清空緩存，看看效果吧（部分IE版本可能不支持）

PS：圖片自動縮放可參考「WordPress使用CSS自動調整圖片大小」

預覽

總結

1、這是個很實用的方法，可以讓圖片看起來更「精巧」一些

2、有問題可以回覆

历史上的今天

2014年：提升WordPress之安全性——使用密鑰方可登入網站教學（32条评论）

觉得这篇文章有用吗？分享一下让更多人受益吧！

© 版权声明：本文章采用“姓名标示-非商业性-相同方式分享 4.0 国际（CC BY-NC-SA 4.0）”于“畅想资源”发布，转载时须以相同方式发布并注明“原文链接”！

本文固定链接：https://www.arefly.com/css-round-photo/

本文章由“超级efly”于2013年08月01日发表于“网络”分类

你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站

转载请注明：使用CSS3為圖片自動添加圓角 | 畅想资源

关键字：CSS, CSS3, 圖片

[上一篇] 使訪客無法按下F12鍵的方法

[下一篇] WordPress使用純CSS自動調整圖片大小

您可能还会对这些文章感兴趣！

如果您对本文有任何疑问或建议，欢迎发送邮件至yifei@hesyifei.com（或通过其它途径）联系我们，谢谢！

沪ICP备14025677号-1

自豪地采用 WordPress | 主题基于 Weisay Simple | 架设于阿里云 | 站点地图 Sitemap

版权所有 © 2012 - 2025 畅想资源 Arefly

                     .  
                    / V\
                  / `  /
                 <<   | 
                 /    | 
               /      | 
             /        | 
           /    \  \ /  
          (      ) | |  
  ________|   _/_  | |  
<__________\______)\__)