Maison > interface Web > tutoriel HTML > le corps du texte

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

WBOY
Libérer: 2016-06-21 09:04:16
original
1119 Les gens l'ont consulté

随着网络的发展,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. }  



    Étiquettes associées:
    source:php.cn
    Article précédent:下面的代码为何不能将具有title属性的标题设为红色_html/css_WEB-ITnose Article suivant:通过yeoman、gulp、angular编写前段时的html模板处理,打包后找不到html的问题解决_html/css_WEB-ITnose
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Derniers articles par auteur
    Derniers numéros
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal