您的位置：首页 > Web前端 > CSS

css3-圆角矩形的效果

2015-12-24 09:59 567 查看


<!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: 15px;

-moz-border-radius: 15px;

}

.box1{

background-color: black;

}

.box2{

background: -webkit-gradient(linear,left top,left bottom,from(#000),to(#999));

background: -moz-linear-gradient(top,red,blue);

}

.box3{

background-color: blue;

-webkit-box-shadow:3px 3px 5px #000;

-moz-box-shadow: 3px 3px 5px #000;

}

</style>

</head>

<body>

<div class="box1">圆角1</div>

<div class="box2">圆角2</div>

<div class="box3">圆角3</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航