艺琼网络

做CSS3中的圆角样式代码怎么写?

浏览:18766人次 发布日期:2014-10-22 来源:艺琼网络

  关于本站原创内容禁止转载的维权通告

只需要加短短的几句CSS3代码就可以轻松实现圆角样式了。

  随着CSS3的问世和普及,许许多多需要采用JS才能实现的网页视觉效果用CSS3即可轻易实现,许多需要用图片才能表达的东西用CSS3就可以,例如我们常用的圆角样式。在此之前,要实现圆角,必须借助图片或其它插件,现在,一切变得非常简单了,只需要加短短的几句CSS3代码就可以了。

 

CSS3代码: border-radius:5px; -moz-border-radius:5px;

 

CSS3圆角效果

使用上面的CSS3样式就可以实现上图所示的圆角效果

 

CSS3甚至允许你设置每一个角的样式,例如如下代码。

/*左上角*/

border-top-left-radius:5px; -webkit-border-top-left-radius:5px;

/*右上角*/

border-top-right-radius:5px; -webkit-border-top-right-radius:5px;

/*左下角*/

border-bottom-left-radius:5px; -webkit-border-bottom-left-radius:5px;

/*右下角*/

border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px;

 

  怎么样,很容易实现吧CSS3圆角吧?其最大的好处在于,不用再为一些圆角的网页元素而去用Photoshop画图了。更好的地方是,由于用CSS代替图片,可以大大减少网页加载量,提高网页打开速度哦。


本文网址:https://yiqnet.com:443/news/n466.html
本文由艺琼网络原创,禁止转载、复制、传播,深圳市艺琼网络科技有限公司保留著作权。
您可能感兴趣的内容
19399
CSS3旋转角度正好笔者在写一个有关网页元素旋转的布局,下面就讨论一下CSS3旋转角度。
` `
网站建设价格计算器
我们的客户
Our Customers
酷派集团酷派集团
王牌家教网王牌家教网
云南固恒集团云南固恒集团
深圳广深家教网深圳广深家教网
深圳标准光深圳标准光
深圳前点科技深圳前点科技
深圳通信人在线深圳通信人在线
中建三局中建三局
东莞ASAQUA东莞ASAQUA
深圳智奇艺科技深圳智奇艺科技
广州艺尚舞台灯光广州艺尚舞台灯光
深圳科博鸿业深圳科博鸿业
中欧企业信息交流协会中欧企业信息交流协会
米粒网米粒网
修正康之霸修正康之霸
深圳西阶教育深圳西阶教育
联系电话:13824347551 电子邮箱:service@yiqnet.com
深圳市艺琼网络科技有限公司 2007-2024 版权所有 | ICP许可证:粤ICP备14034579号
公司主营:深圳做网站、深圳网站建设、东莞做外贸网站等,为全国各地做网站的企业提供服务。
旗下产品 企业网站建设 外贸网站建设 模板网站建设
我要
做网站
售前咨询售后支持企业邮箱招商合作
艺琼网络微信
扫一扫关注
艺琼官方微信
深圳市艺琼网络科技有限公司
网站建设专家

有什么疑问吗?
艺琼网站建设专家为您排忧解难。