css3.0:border-radius 圆角边框 linearlayout圆角边框

在css3.0中,又添加了一个新的属性border-radius,使用border-radius这个属性可以实现圆角边框的效果。除IE和遨游外,目前有Firefox,Safari,Chrome,Opera支持该属性,其Safari,Chrome,Opera是支持最好的,依照了w3c的标准,仅仅使用border-radius,就可以实现效果,无需加入前缀-webkit。而火狐依然需要加上前缀-moz。

即:

Firefox支持border-radius(圆角):-moz-border-radius:10px;

webkit内核的Safari和Chrome支持border-radius(圆角):-webkit-border-radius:10px;

Opera支持border-radius(圆角):border-radius:10px;

IE不支持border-radius(圆角)

效果图:(IE和遨游不支持!)



代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>圆角效果border-radius</title>

<style type="text/css">

body,div{margin:0;padding:0;}

.border{width:200px;border:10px solid gray;height:20px;

-moz-border-radius:10px;/*仅Firefox支持,实现圆角效果*/

-webkit-border-radius:10px;/*仅Safari,Chrome支持,实现圆角效果*/

-khtml-border-radius:10px;/*仅Safari,Chrome支持,实现圆角效果*/

border-radius:10px;/*仅Opera,Safari,Chrome支持,实现圆角效果*/

}

</style>

</head>

<body>

<div>border radius</div>

</body>

</html>

再此我们还可以随意指定圆角的位置,上左,上右,下左,下右四个方向。

在firefox、webkit内核的Safari,Chrome和 Opera的具体书写格式如下:

上左效果:



-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius 上左

上右效果:



-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius 上右

下左效果:



-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius 下左

css3.0:border-radius 圆角边框 linearlayout圆角边框
下右效果:



-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius 下右

然后我们可以做些效果:

例如常见的 标题栏 仅仅需要在上面用到圆角效果,如图:



代码 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>圆角效果border-radius</title>

<style type="text/css">

.border{width:120px;border:15px solid gray;height:20px;

background:gray;color:#fff;

-moz-border-radius-topright:15px;

-moz-border-radius-topleft:15px;

-webkit-border-top-right-radius:15px;

-webkit-border-top-left-radius:15px;

border-top-right-radius:15px;

border-top-left-radius:15px;

}

</style>

</head>

<body>

<div>border radius</div>

</body>

</html>



代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>圆角效果border-radius</title>

<style type="text/css">

.border{width:120px;border:15px solid gray;height:20px;

background:gray;color:#fff;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:15px;

-webkit-border-top-right-radius:15px;

-webkit-border-bottom-left-radius:15px;

border-top-right-radius:15px;

border-bottom-left-radius:15px;

}

</style>

</head>

<body>

<div>border radius</div>

</body>

</html>

阴影效果

-webkit-box-shadow: #000 0px 0px 10px这个代码非常不错可以做DIV投影。代码分析,第一个0PX是往右移动多少像素,第二个0PX往下移动多少像素最后一个是投影大小。

万变不离其宗,仅仅需要改下的border-radius的方向,就可以实现一些很有用的效果,代码变的越来越简单。

  

爱华网本文地址 » http://www.413yy.cn/a/25101011/79787.html

更多阅读

CSS3 圆角border-radius 圆角特效 border radius

<div id="round"></div>?#round {padding:10px; width:300px; height:50px;border: 5px solid #dedede;-moz-border-radius: 15px; /* Gecko browsers */-webkit-border-radius: 15px; /* Webkit browsers */border-radius:15px; /

css3.0:Outline

css3.0:Outline—外边框outline(外边框)的功能在css3中得到了新的扩展,其属性outline-offset可以让外边框远离容器边缘,即可以调整外框与容器边缘的距离,还是来个例子比较好说明他的特性。目前只有Opera,Safari 和 Firefox支持。html代

第八讲:HTMLCSS插入样式表的三种方式

暂时了解下CSS,简单点说:CSS就像是外衣,用于设置美化网页外观.最新组合CSS3.0+HTML5,由于版本太新使用必须考虑它兼容性问题.下面演示下:三种方式来插入样式表.第一:外部样式表:<head><linkrel="stylesheet type="text/css" href="mystyl

CSS属性 - border-bottom-style 下边框风格属性 border bottom

说明该CSS属性用来设定下边框的风格。边框区域的定义,请参见CSS 盒子模式 (Box Model)。值:<border-style> | inherit可用值 值的说明none 没有边框,无论边框宽度设为多大dotted 点线式边框dashed 破折线式边框solid 直线式边框double

声明:《css3.0:border-radius 圆角边框 linearlayout圆角边框》为网友短发女爷分享!如侵犯到您的合法权益请联系我们删除