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

网站最后更新日期：2018年8月29日

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

×

暢想資源的Facebook粉絲專頁

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

Aug012013

作者：超级efly 发布：2013-08-01 12:09 分类：网络阅读：7,387 14条评论

現今越來越多瀏覽器開始支持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自動調整圖片大小

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

使用CSS3為圖片自動添加圓角：目前有 14 条留言
双方以 7：7 暂时持平

评论载入中，请稍等……

5楼
ROS ：

好棒

2014-05-03 下午2:37 [回复]
- 超級efly ：
  
  2014-05-10 上午7:01 [回复]
4楼
木易 ：

这个蛮不错的，支持一下.

2013-08-06 上午10:36 [回复]
- 超級efly ：
  
  2013-08-06 下午3:21 [回复]
地板
经验公式 ：

学习啦！已经用上咯

2013-08-02 下午4:42 [回复]
- 超級efly ：
  
  2013-08-02 下午5:28 [回复]
板凳
微尘逐风 ：

好方法

2013-08-01 下午9:13 [回复]
- 超級efly ：
  
  PS：你使用的是什麼瀏覽器啊？
  
  2013-08-01 下午9:34 [回复]
  - go ：
    
    圆角效果挺不错的
    
    2013-08-02 上午10:55 [回复]
    - 超級efly ：
      
      PS：又用了什麼Firefox的Header麼？
      
      2013-08-02 上午11:04 [回复]
      - go ：
        
        上面那个不是，是开了goa，这个是改了Header
        
        2013-08-02 上午11:43 [回复]
        
        超級efly ：
        
        原來如此
        
        2013-08-02 上午11:46 [回复]
沙发
小五：

以前就在使用啦

2013-08-01 下午4:29 [回复]
- 超級efly ：
  
  這是個很好的功能
  
  2013-08-01 下午4:35 [回复]

发表评论 点击这里取消回复。

昵称一定要让大家知道你是谁

邮箱必须填写，不过不会公开显示（教你设置自己的头像）

网址如果你没有网站的话可以不填哦

表情粗体斜体颜色引用链接删除线下划线代码图片签到

快捷键：Ctrl+Enter