用 CSS3 给 图片添加圆角

 

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 系列不用说了。

zhaoan

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

You may also like...