CSS-论css如何纯代码实现内凹圆角-白红宇

background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px);

这是做内凹圆角的核心代码，就是背景图的radial-gradient，只设置两种颜色，中间不进行过渡渐变。两种颜色叠到一起就是一条实线，看上去就是两个色块的拼接。

1.立体质感圆球

网上看到的一个很有趣的小案例——用radial-gradient制作的立体质感小圆球。

就一行代码！

.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);}

2.手动内凹

如下是一种用一个圆和一个方形盒子叠加做出的内凹圆角的的效果。

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.我自己也来玩玩

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);，

就画出这么一个小内凹角来，想要另外方向的也可以变化。如下的一个完整案例

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的蛋疼的径向渐变