Andy Zhao's Blog

  • 首页
  • web开发
  • 互联网
  • 技术分享
  • 网站运营
  • 交互设计
  • 资源分享
    • 工具
    • 欣赏
    • 素材
  • 生活杂语
Welcome
记录一些点点滴滴
  1. 首页
  2. web开发
  3. css
  4. 正文

用 CSS3 给 图片添加圆角

2011/12/08 3212点热度 3人点赞 0条评论

 

Preview_68

网页里面插入图片,有时候会出现图片边缘和网页底色相同或相近的情况,看起来容易眼花。
之前如果用CSS进行图片圆角是一件非常麻烦的事情,而如果手动将图片剪裁成圆角对于直接从网上扒下来的图又太麻烦了。
而 CSS3 提供了 border-radius 属性,可以直接为图片添加圆角。以下只针对 WordPress 的 CSS 文件,其他网页类推。

打开 Style.css 文件
找到
img {
border: 0;
}
有些主题可能已经为图片添加了边框等属性,找到 img { } 即可。

将其修改为
img {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
其后的 10px 中的数字可以按照喜好任意更改。

如果原本的主题 CSS 文件中已经包含了边框设置,则只需要添加
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
即可。

不过上面 CSS 目前圆角只支持 Webkit 内核浏览器和 Gecko 内核浏览器,如需支持 KHTML 还需另行添加,在此不赘述。
另外 Opera 支持度不详, IE 系列不用说了。

标签: css 设计
最后更新:2011/12/08

zhaoan

一个不起眼的IT工作者,从事过的行业较多,医疗保健、医院、月子会所、机电、重卡、软件,涉及的岗位也较多,零售、市场、平面设计、网站设计、UI设计、前端开发、后端开发、网络布线、设备维护、服务器维护、网络推广、网站运营、新媒体运营、部门管理等等,每个岗位工作基本都能独立完成,但是涉及面广导致都不精通,学习还在继续中。。。

点赞
< 上一篇
下一篇 >

文章评论

取消回复

搜索
分类
  • asp / 2篇
  • css / 27篇
  • html / 9篇
  • javascript / 15篇
  • php / 6篇
  • web开发 / 8篇
  • wordpress / 7篇
  • 互联网 / 16篇
  • 交互设计 / 30篇
  • 其他 / 3篇
  • 工具 / 3篇
  • 欣赏 / 11篇
  • 生活杂语 / 6篇
  • 用户体验 / 1篇
  • 素材 / 3篇
  • 网站建设 / 3篇
  • 网站推广 / 4篇
  • 网站运营 / 5篇
  • 网络技术 / 1篇
最新 热点 随机
最新 热点 随机
宝塔的FTP存储空间,API资料校验失败,请核实! 移动端APP下拉刷新与轮播图冲突的解决方法 头条号怎么运营?怎么涨粉? 转载:移动前端开发之viewport的深入理解 判断来访是搜索引擎蜘蛛还是普通用户,蜘蛛正常抓取,用户跳转指定页面 为什么我们需要构图?构图有哪些原则?
CSS简写 CSS命名规范和写法整理 零距离侃美国——黄色特权车,安全有保障 Web应用程序的开发步骤 为什么我们需要构图?构图有哪些原则? php怎么获取当前URL地址

COPYRIGHT © 2022 zhaoan.org. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

陕ICP备09022954号