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

WBOY
풀어 주다: 2016-06-21 09:04:16
원래의
1119명이 탐색했습니다.

随着网络的发展,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으로 문의하세요.
    저자별 최신 기사
    최신 이슈
    관련 주제
    더>
    인기 추천
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿