当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS3入门教程(2):边框半径和圆角

时间:2013-03-02 03:42来源:未知 作者:admin 点击:

标签:CSS3入门教程(2):边框半径和圆角 CSS3(90)入门教程(37)h(8)圆角(28)边框(13)半径(1)
, CSS3入门教程(10):HSL和HSLA 以下是代码片段: #roundCornerI{ font-family:Arial; border:5pxsolid#dedede; -moz-border-radius-topleft:15px; -moz-border-radius-topright:0px; -moz-border-radius-bottomright:15px; -moz-border-radius-bottomleft:0
CSS3入门教程(2):边框半径和圆角》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332052013.htm
,CSS3入门教程(10):HSL和HSLA

以下是代码片段:
#roundCornerI{
  font-family: Arial;
  border: 5px solid #dedede;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 0px;
 ,CSS3入门教程(1):CSS3简介; -moz-border-radius-bottomright: 15px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 0px;
  ,CSS3中背景的四个新的属性;-webkit-border-bottom-left-radius: 0px;
  -webkit-border-bottom-right-radius: 15px;
  padding: 15x 25px;
  height: ,CSS3下的渐变文字效果实现;inherit;
  width: 590px;
}

CSS3圆角(所有的)

 

当然,一个DIV的四个角不须要全体都是圆角,你可以个别的实现圆角。

浏览器支持:

 

这是一个5px一般边框和15px边框半径的设置:

-moz(例如 -moz-border-radius)用于Firefox
-webkit(例如:-webkit-border-radius)用于Safari和Chrome。

√ Firefox(3.05+…) √ Google Chrome(1.0.154+&hellip,Css3 弹性盒模型;) √ Google Chrome(2.0.156+…) × Internet Explorer(IE7, IE8) × Opera 9.6 √ Safari(3.2.1+ windows)

 

CSS3圆角(个别的)

不使用图片来实现圆角曾经是很风行的才能,创立那些完善的小圆角图片,用做恰当的CSS背景,是十分费时的工作。现在,使用CSS3,CSS3 VS CSS2大PK,我们可以用多少行代码来创建圆角。

web设计中圆角虽然很美丽,CSS3 Transition属性详解,然而实现起来却不是很便利,固然当初有良多种实现方式,但是都是比拟麻烦的。在本文中,让咱们看看如何应用CSS3 border-radius来实现圆角DIV。

&radic,CSS3 target伪类简单介绍; Firefox(3.05+&hellip,CSS3 RGBA颜色类型不等于RGB与opacity相加;) √ Google Chrome(1.0.154+…) √ Google Chrome(2.0.156+…) × Internet Explorer(IE7,CSS3 Media Queries详解, IE8) × Opera 9.6 √ Safari(3.2.1+ windows)

前缀:

跨浏览器兼容性

Tag:圆角   半径   边框   CSS3入门   CSS3   圆角   半径   边框   CSS3入门   CSS3  

阅读器支撑:

--> [网站建设之]CSS3入门教程(2):边框半径跟圆角

以下是代码片断:
#roundCorderC{
 font-family: Arial;
 border: 5px solid #dedede;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 padding: 15px 25px;
 height: inherit;
 width: 590px;
 }

就像在上一篇《CSS3入门教程(1):CSS3简介》中提到的,并不是所有的浏览器支持CSS3,但是那些比较好的浏览器抉择兼容,而不是直接支持。我们有两个能使用的前缀。

阐明:对于border-radius的先容也能够参考一下本站之前宣布的《详解CSS3:border-radius》


(责任编辑:网站建设)
CSS3入门教程(2):边框半径和圆角相关文章
上一篇:CSS3入门教程(10):HSL和HSLA 下一篇:CSS3入门教程(3):边框颜色
回到顶部