使用CSS3实现圆角矩形效果
[ 录入者:91ctc | 时间:2015-06-05 10:41:36
| 作者: 91ctc| 来源:本站原创
| 浏览: 次 ]
随着HTML5和CSS3的流行，很多以前HTML4无法实现的效果，也都能实现了，比如圆角效果：
在HTML5和CSS3以前，如果美工所绘制网页PSD效果图里有圆角效果，切图人员不得不把圆角作为图片，使用background来实现。其实用背景图片实现圆角效果也不是不可以。小编早些年就是这么做。在开发某些必须要考虑IE8以下版本的WEB应用时，使用背景图片做圆角不失为一个好的选择。
给出上文效果图的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css圆角特效</title>
<style>
div{
text-align: center;
font-size: 32px;
width: 100px;
color: white;
padding: 10px;
margin: 10px;
-webkit-border-radius: 8px;/*定义半径*/
-moz-border-radius: 8px;/*定义半径*/
}
.box1{
background-color: green;
}
.box2{
background: -webkit-gradient(linear,left top,left bottom,from(#077719),to(#3ccb78));/*定义渐变*/
background: -moz-linear-gradient(top,red,blue);
}
.box3{
background-color:#84e194;
-webkit-box-shadow:3px 3px 5px #cacaca;/*定义阴影*/
-moz-box-shadow: 3px 3px 5px #cacaca;/*定义阴影*/
}
</style>
</head>
<body>
<div class="box1">圆角1</div>
<div class="box2">圆角2</div>
<div class="box3">圆角3</div>
</body>
</html>虽然整体HTML文档使用的是HTML5，其实HTML部分用HTML4写也可以。只要CSS3的属性浏览器支持即可。
{xiangguan_list}
推荐文章
热门文章