旗下网站

百科知识库

报道公司事件 · 传播行业动态

圆角样式在CSS3中可以实现啦

发布日期:2015-01-29    发布者:金菊

  伴随着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代替图片,可以大大减少网页加载量,提高网页打开速度哦。

Copyright 大连网龙科技 版权所有 辽ICP备14006349号  html - txt - xml

辽公网安备 21021702000140号

电话
客服