CSS圆角效果

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

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

    圆角效果:

    CSS圆角效果

  代码:

   CSS圆角效果

 

阴影效果:

    CSS圆角效果

代码:

  CSS圆角效果

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

CSS圆角效果CSS圆角效果
 1 <head runat="server">
 2     <title>创建圆角</title>
 3     <style type="text/css">
 4         .rounded
 5         {
 6             background: #00ff00;
 7             border-radius: 90px;
 8             height: 150px;
 9             width: 150px;
10         }
11         .rounded1
12         {
13             background: red;
14             border-radius: 50px;
15             height: 80px;
16             width: 80px;
17         }
18     </style>
19 </head>
20 <body>
21     <form id="form1" runat="server">
22     <div class="rounded">
23       
24     </div>
25     </form>
26 </body>
View Code

效果图:
CSS圆角效果