background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px);
这是做内凹圆角的核心代码，就是背景图的radial-gradient，只设置两种颜色，中间不进行过渡渐变。两种颜色叠到一起就是一条实线，看上去就是两个色块的拼接。
1.立体质感圆球
网上看到的一个很有趣的小案例——用radial-gradient制作的立体质感小圆球。
就一行代码！
<span class="egg"></span>
.egg {display: block;margin-top: 30px;width: 100px;height: 100px;border-radius: 50px;background: radial-gradient(at 35px 35px, #FFF, #CCC, #FFF);background: -webkit-radial-gradient(35px 35px, #FFF, #CCC, #FFF);}
http://blog.csdn.net/playboyanta123/article/details/9303857
2.手动内凹
如下是一种用一个圆和一个方形盒子叠加做出的内凹圆角的的效果。
1 <div class="something-meaningful brdradius"></div>
2 <div class="something-meaningful">
3 <div>
4 <a href="http://www.w3cplus.com/css3/css-secrets/inner-rounding.html"></a>
5 </div>
6 </div>
1 .something-meaningful {display: inline-block;width: 55px;height: 55px;overflow: hidden;line-height: 130px;background: #655;text-align: center;/* padding: .8em; */position: relative;float: left;} 2 .brdradius {border-top-left-radius: 45%;} 3 .something-meaningful> div {width: 100px;height: 100px;background: #fff;border-radius: 5em;position: absolute;top: -46px;left: 2px;/*padding: 1em;*/}
3.我自己也来玩玩
<span class="radius"></span>
1 .radius {width: 50px;height: 50px;line-height: 100px;display: block;text-align: center;background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px);}
利用个背景色的径向渐变background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px);，
就画出这么一个小内凹角来，想要另外方向的也可以变化。如下的一个完整案例
<ul class="uls"> <li>1 <span class="li-boradiu"></span> </li> <li>2 <span class="li-boradiu"></span> </li> <li>3</li> </ul>
1 .uls{list-style-type: none;*zoom: -1;} 2 .uls:after{content: "";clear: both;display: block;} 3 .uls li{display: block;float: left;width: 120px;height: 35px;background-color: #4169E1;text-align: center;line-height: 35px;color: white;/*做上圆角*/border-top-left-radius : 15px; border-top-right-radius : 15px; } 4 .li-boradiu{display: inline-block;width: 35px;height: 35px;/*background-color: #4169E1;*/background-image: radial-gradient(70px at 17.5px 0, #f00);}
参考资料：radial-gradient CSS3的蛋疼的径向渐变
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>内凹圆角</title>
7 <meta name="description" content="css3，内凹圆角">
8 <meta name="author" content="郭菊锋702004176@qq.com"/>
9 <style type="text/css">
10 .egg {
11 display: block;
12 margin-top: 30px;
13 width: 100px;
14 height: 100px;
15 border-radius: 50px;
16 background: radial-gradient(at 35px 35px, #FFF, #CCC, #FFF);
17 background: -webkit-radial-gradient(35px 35px, #FFF, #CCC, #FFF);
18 }
19
20 .something-meaningful {
21 display: inline-block;
22 width: 55px;
23 height: 55px;
24 overflow: hidden;
25 line-height: 130px;
26 background: #655;
27 text-align: center;
28 /* padding: .8em; */
29 position: relative;
30 float: left;
31 }
32
33 .brdradius {
34 border-top-left-radius: 45%;
35 }
36
37 .something-meaningful> div {
38 width: 100px;
39 height: 100px;
40 background: #fff;
41 border-radius: 5em;
42 position: absolute;
43 top: -46px;
44 left: 2px;
45 /*padding: 1em;*/
46 }
47
48 .radius {
49 width: 50px;
50 height: 50px;
51 line-height: 100px;
52 display: block;
53 text-align: center;
54 background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px);
55 }
56 .uls{
57 list-style-type: none;
58 *zoom: -1;
59 }
60 .uls:after{
61 content: "";
62 clear: both;
63 display: block;
64 }
65 .uls li{
66 display: block;
67 float: left;
68 width: 120px;
69 height: 35px;
70 background-color: #4169E1;
71 text-align: center;
72 line-height: 35px;
73 color: white;
74 /*做上圆角*/
75 border-top-left-radius : 15px;
76 border-top-right-radius : 15px;
77 }
78 .li-boradiu{
79 display: inline-block;
80 width: 35px;
81 height: 35px;
82 /*background-color: #4169E1;*/
83 background-image: radial-gradient(70px at 17.5px 0, #f00);
84 }
85 </style>
86 </head>
87
88 <body>
89
90 <h3>1.网上看到的一个很有趣的小案例——用radial-gradient制作立体质感圆球。</h3>
91 <!--http://blog.csdn.net/playboyanta123/article/details/9303857-->
92 <span class="egg"></span>
93
94 <!--手动内凹！-->
95 <h3>2.如下是一种用一个圆和一个方形盒子叠加做出的内凹圆角的的效果。</h3>
96 <div class="something-meaningful brdradius"></div>
97 <div class="something-meaningful">
98 <div>
99 <a href="http://www.w3cplus.com/css3/css-secrets/inner-rounding.html"></a>
100 </div>
101 </div>
102 <h3 style="clear: both;padding-top: 10px;">3.自己也来玩玩</h3>
103 <span class="radius"></span>
104 <p>这样 利用个背景色的径向渐变background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px);，就画出这么一个小内凹角来，想要另外方向的也可以变化。如下的一个完整案例</p>
105 <ul class="uls">
106 <li>1
107 <span class="li-boradiu"></span>
108 </li>
109 <li>2
110 <span class="li-boradiu"></span>
111 </li>
112 <li>3</li>
113 </ul>
114
115
116
117
118
119 <a href="http://blog.csdn.net/playboyanta123/article/details/9303857">参考资料：radial-gradient CSS3的蛋疼的径向渐变</a>
120
121 </body>
122
123 </html>
