CSS3学习笔记之border-radius_html/css_WEB-ITnose

我觉得CSS3很不错，自己也稍微看过，并且尝试过一些属性。对我自己而言，我没有勇气说我学过CSS3，我觉得任何自己看来很小的事情，也只是站在自己的角度来评判。就算的是“简单的”HTML在我看来也是很值得研究的，只有时刻保持一个谦逊的姿态，才能够看得更远，走得更稳。

在这里要感谢一下网站：

w3cplus，W3School ，W3C 等等一些网上的教程啊博客什么的（还有好多就不一一列举了），我算是从这些地方开始接触传说中的CSS3和HTML5，而自己的学习笔记自然也会从中借鉴。

今天介绍的是CSS3的圆角 ：border-radius

遥想当年……在CSS2的基础上做圆角还能算得上是门学问！！各种图片、各种嵌套（《精通CSS??高级web标准解决方案》中有介绍，过程在这就不说了，网上一查就查得到，总之就是：没用CSS3之前觉得很高端，用了CSS3之后就不想再看到它了）

但是自从CSS3的圆角属性border-radius出现之后，广大前端工程师可以省去了很多烦恼，不仅减少了工作量，还能提高网站的性能。只可惜高贵的低版本IE不支持CSS3的绝大部分属性……或者说几乎都不支持，虽然牛人们有写很多针对IE的兼容方案，但是我不推荐用。圆角很多时候只是在视觉上更优雅，基本不影响用户使用。

你看不到圆角只能怪你和低版本IE做朋友！！！！

好，现在开始正式介绍这个高贵的属性

border-radius的用法：

属性名 border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius,border-radius 属性值 长度（eg:10px） 初始值 0 可否继承 不能继承

border-radius中的值的大小决定了圆弧的形状，每个角的圆弧其实就是以在这个角上设定的值的大小为半径画出的圆的1/4弧线。

举个栗子：当border-radius只有一个值的时候

设置border-radius：50px；

CSS代码：

 1: .test{ 

 2:     width:200px; 

 3:     height:200px; 

 4:     background:#368; 

 5:     margin:80px auto;/*为了使元素居中，没有别的意思*/ 

 6:     -webkit-border-radius:50px; 

 7:     -moz-border-radius:50px; 

 8:     -o-border-radius:50px; 

 9:     border-radius:50px; 

 10: } 

HTML代码： 

 1: 


      
查看更多关于CSS3学习笔记之border-radius_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did102228