css3.0:border-radius 圆角边框 linearlayout圆角边框
即:
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 下左
下右效果:
-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的方向,就可以实现一些很有用的效果,代码变的越来越简单。
更多阅读
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; /
IOS_视图实现圆角效果的三种方法及比较 css实现圆角边框
通过代码,至少有三种方法可以为视图加上圆角效果。附例子:https://github.com/weipin/RoundedCorner方法一、layer.cornerRadius第一种方法最简单,通过层对象的cornerRadius属性实现圆角效果,代码如下:view.layer.cornerRadius = 8.0;vie
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