当前位置:天才代写 > tutorial > 网页教程 > 摆脱图片依赖——用纯CSS3实现圆角边框

摆脱图片依赖——用纯CSS3实现圆角边框

2018-05-17 08:00 星期四 所属: 网页教程 浏览:309

      圆角可谓Web开发者的一大福音。想当年,做一个圆角要搞至少3张图片,然后通过拼接把圆角拼出来。不仅如此,还要对div进行各种拆分,导致开发速度慢,用户打开卡,真是吃力不讨好啊。

  css3圆角的诞生终于让我们彻底告别那个民怨载道的年代。我们不再需要依赖图片,而是直接通过CSS3提供的border-radius即可一键完成圆角的设置。

      来看看下面的代码:

摆脱图片依赖——用纯CSS3实现圆角边框_圆角边框制作_CSS3新功能_border-radius属性_课课家

  设置圆角前,效果如下图所示:

设置圆角前效果

  然后来看看这个神奇的border-radius属性吧:

       .round-corner{

  /*其它样式代码省略*/

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  -o-border-radius: 5px;

  border-radius: 5px;

  }

  看起来有点繁琐啊~其实不然,4行代码的功能完全一致。它们的区别仅仅是多了些前缀,作用在于兼容不同的浏览器。哈,浏览器厂商还是有点私心滴,希望通过这个广告让我们永远记住浏览器的主人是谁。moz代表火狐浏览器,webkit代表chrome内核浏览器,o代表Opera浏览器。

  来看看效果,嘿嘿,圆角出来了:

圆角出来了

  圆角的强大之处远不止这个,我们还可以为4个角设置不同的半径。

       写法如下:

     .round-corner{

  /*其它样式代码省略*/

  -moz-border-radius: 5px 10px 20px 8px;

  -webkit-border-radius: 5px 10px 20px 8px;

  -o-border-radius: 5px 10px 20px 8px;

  border-radius: 5px 10px 20px 8px;

  }

  属性值包含4个数,依次代表左上,右上,右下和左下,它们用英文空格进行分隔。

  再次运行,效果变成这样了,很神奇吧,如果矩形宽度小点,它看起来就像个不规则图形了。所以现在很多人都喜欢利用CSS3的圆角特性绘制各种精美的图形或者图标,彻底摆脱对图片文件的依赖。

为4个角设置不同半径代码效果

  这是一种比较节省文件字节数的缩写方法。如果担心自己记不住顺序,那可以用压缩前的写法,一行一个角,具体如下:

为4个角设置不同半径详细代码

  本来一行拆成4行还好,但是要兼容那么多浏览器,天哪,好长,漏写了一个都不好查。当然了,这代码也可以用工具生成,只不过……要是我们花两三分钟时间记一下不就能省事了么?而且文件也小很多。

  所以最后,小编跟大家讲讲规律。很简单,第一个点是左上角,然后顺时针排过去,就是顺序了。希望通过这样的关联记忆法,大家可以更熟练地使用CSS3的圆角,让Web开发水平更进一步!

 

    关键字:

天才代写-代写联系方式