全百科精品资源分享
免费优质资源下载平台

如何利用css让网站的图片显示圆角化

播放按钮

一般的照片都是方形的,有什么办法可以让照片在显示的时候显示成圆角呢?今天就看下全百科网是如何做到的吧。

如何利用css让网站的图片显示圆角化

CSS3圆角只需设置一个属性:border-radius(含义是”边框半径”)。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

代码实例:border-radius: 15px;

1、把下列代码添加进入你的网站

<img src="http://www.quanbaike.com/img/banner01.jpg" style="border-radius: 15px;">

2、清空缓存,看看效果吧(部分IE版本可能不支持)
原图效果
如何利用css让网站的图片显示圆角化
圆角效果

如何利用css让网站的图片显示圆角化

总结

这是个很实用的方法,而且只需要一句代码就可以让图片看起来更美观了。

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0) 打赏
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com全百科网 » 如何利用css让网站的图片显示圆角化
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏