CSSフィレット効果

8437 ワード

庭のCSSのフィレットテクニックについての文章を見て、試してみて、とてもいいと思って、練習のコードを貼りました.優秀な記事リンク:
     http://www.cnblogs.com/luluping/archive/2010/06/26/1765616.html
フィレット効果:
    CSS圆角效果_第1张图片
コード:
   CSS圆角效果_第2张图片
 
シャドウ効果:
    CSS圆角效果_第3张图片
コード:
  CSS圆角效果_第4张图片
2015.1.28深夜、上に以前書いたコードを見て、複雑な感じがして、ちょうど1冊の本の上で円角の簡単な描き方を紹介したのを見て、以下に書きました:(「HTMLとCSS入門経典」by[美]Julie Meloniこれは女性です)

 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圆角效果_第5张图片