使用CSS3为图片自动添加圆角 – 畅想资源

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

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

×

畅想资源的Facebook粉丝专页

使用CSS3为图片自动添加圆角

Aug012013

作者：超级efly 发布：2013-08-01 12:09 分类：网络阅读：7,122 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/zh-cn/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