CSS3实例教程(2):网页页面边框半径和网页页面圆角

2021-01-20 16:05 jianzhan

网页页面中圆角的完成是个很头疼的难题,尽管如今有许多种完成方式,可是全是较为不便的。在本文中,让大家看看怎样应用CSS3 border-radius来完成圆角DIV。
网页页面中圆角的完成是个很头疼的难题,尽管如今有许多种完成方式,可是全是较为不便的。在本文中,让大家看看怎样应用CSS3 border-radius来完成圆角DIV。 跨访问器适配性
就像在上1篇《CSS3实例教程:甚么是CSS3》中提到的,其实不是全部的访问器适用CSS3,可是那些较为好的访问器挑选适配,而并不是立即适用。大家有两个能应用的前缀。
前缀:
-moz(比如 -moz-border-radius)用于Firefox
-webkit(比如:-webkit-border-radius)用于Safari和Chrome。 CSS3圆角(全部的)
不应用照片来完成圆角以前是很时兴的工作能力,建立那些完善的小圆角照片,用做适度的CSS情况,是是非非常费时间的工作中。如今,应用CSS3,大家能够用几行编码来建立圆角。

这是1个5px一般边框和15px边框半径的设定:
#roundCorderC{ font-family: Arial; border: 5px solid #dedede; -moz-border-radius: 15px; -webkit-border-radius: 15px; padding: 15px 25px; height: inherit; width: 590px; }
访问器适用:
  • Firefox(3.05 …)
  • Google Chrome(1.0.154 …)
  • Google Chrome(2.0.156 …)
  • Internet Explorer(IE7, IE8)
  • Opera 9.6
  • Safari(3.2.1 windows) CSS3圆角(某些的)
    自然,1个DIV的4个角不必须所有全是圆角,你能够某些的完成圆角。

    #roundCornerI{ font-family: Arial; border: 5px solid #dedede; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 0px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 15px; padding: 15x 25px; height: inherit; width: 590px; }
    访问器适用:
    • Firefox(3.05 …)
    • Google Chrome(1.0.154 …)
    • Google Chrome(2.0.156 …)
    • Internet Explorer(IE7, IE8)
    • Opera 9.6
    • Safari(3.2.1 windows)