首頁 > web前端 > html教學 > CSS3绘制圆角矩形的简单示例_html/css_WEB-ITnose

CSS3绘制圆角矩形的简单示例_html/css_WEB-ITnose

WBOY
發布: 2016-06-21 09:04:16
原創
1142 人瀏覽過

随着网络的发展,CSS 也在不断的完善,充分吸取多年来 Web 发展的需求,提出了很多新颖的 CSS 特性,例如很受欢迎的圆角矩形 border-radius 属性,但很可惜,此属性目前没有得到任何浏览器的支持。

对于一些浏览器,它们有其私有的圆角属性。如 FF 的 -moz-border-radius ,Safari 和 Chrome 的 -webkit-border-radius 。效果见下图:

FF 的圆角

Safari 和 Chrome 的圆角(Safari 和 Chrome 使用的是同一种内核,这里就只附 Chrome 的效果了)

IE 和 Opera 就没有私有的圆角属性了,如果有的话,那制作圆角应该就简单多了,把各自的私有属性全部写上,让各个浏览器“对号入座”,就达到了“兼容”的效果。

下面给出一个百度有啊CSS圆角方案的示例:

XML/HTML Code

  1.   
  2.       

  3.     

      
  4.         

    圆角一

      
  5.     

  
  •       

  •   

    CSS 代码:

    JavaScript Code

    1. .box1 {   

    2.  background:url(images/bg1.gif) repeat-x #1d6cb7;   

    3.  margin-top:1em;   

    4.  position:relative;   

    5.  zoom:1;   

    6.  width:778px;   

    7. }   

    8. .box1 .tl, .box1 .tr, .box1 .bl, .box1 .br {   

    9.  width:5px;   

    10.  height:5px;   

    11.  position:absolute;   

    12.  background:url(images/bg3.gif) no-repeat;   

    13.  overflow:hidden;   

    14. }   

    15. .box1 .cc {   

    16.  height:40px;   

    17.  padding:5px;   

    18. }   

    19. .box1 .tl {   

    20.  left:0;   

    21.  top:0;   

    22. }   

    23. .box1 .tr {   

    24.  right:0;   

    25.  top:0;   

    26.  background-position:0 -5px;   

    27. }   

    28. .box1 .bl {   

    29.  left:0;   

    30.  bottom:0;   

    31.  background-position:0 -10px;   

    32. }   

    33. .box1 .br {   

    34.  right:0;   

    35.  bottom:0;   

    36.  background-position:0 -15px;   

    37. }  



    來源:php.cn
    上一篇:下面的代码为何不能将具有title属性的标题设为红色_html/css_WEB-ITnose 下一篇:通过yeoman、gulp、angular编写前段时的html模板处理,打包后找不到html的问题解决_html/css_WEB-ITnose
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    作者最新文章
    最新問題
    相關專題
    更多>
    熱門推薦
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板