CSS圆角效果

时间:2020-12-23 05:02:20

看了院子里一篇关于CSS圆角技巧的文章,试了一下,觉得很好,贴出练习的代码。优秀文章链接:

http://www.cnblogs.com/luluping/archive/2010/06/26/1765616.html

圆角效果:

CSS圆角效果

代码:

CSS圆角效果

阴影效果:

CSS圆角效果

代码:

CSS圆角效果

2015.1.28深夜,看到上面以前写的代码,感觉后复杂,刚好看到一本书上介绍了圆角的简单画法,写在下面:(书名:《HTML与CSS入门经典》 by [美] Julie Meloni 这是一位女士)

 <head runat="server">
<title>创建圆角</title>
<style type="text/css">
.rounded
{
background: #00ff00;
border-radius: 90px;
height: 150px;
width: 150px;
}
.rounded1
{
background: red;
border-radius: 50px;
height: 80px;
width: 80px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="rounded"> </div>
</form>
</body>

效果图:
CSS圆角效果