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

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iOS122-移动混合开发研究院

如何把设计图自动转换为iOS代码? 在线等,挺急的!

这是一篇可能略显枯燥的技术深度讨论与实践文章.如何把设计图自动转换为对应的iOS代码?作为一个 iOS开发爱好者,这是我很感兴趣的一个话题.最近也确实有了些许灵...

27260
来自专栏iOS开发攻城狮的集散地

iOS 传感器集锦

连续三次指纹识别错误后,会自动弹出密码框,通过Touch ID的密码进行身份验证,如果此时取消密码验证,再2次指纹识别失败后,也就是 3 + 2 = 5次指纹识...

27580
来自专栏iOS开发随笔

SCNView

在渲染过程过中,视图模型常常会出现锯齿边缘。这是因为模型是由多边形组成的,当显卡运算频率不够高,或者显存不够大的时候,“多边形”绘制速度比较慢,就会出现锯齿。此...

345130
来自专栏程序你好

11种最佳编程字体中的哪款适合你?

78620
来自专栏天天

vue中的一些小坑(3)

在开发中模拟数据,实现接口,主要是在webpack.dev.conf.js中配置代理

16340
来自专栏互联网软件技术

Phaser.js之简单的跑酷游戏

源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone)

31230
来自专栏前端小叙

react-router 4.3 js实现跳转

8010
来自专栏安富莱嵌入式技术分享

【安富莱二代示波器教程】第2章示波器操作说明及其介绍

教程完整下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=45785

16930
来自专栏向治洪

andriod游戏音效

同学们在玩游戏的时候应该都会发现游戏中会有两种形式来播放音乐 ,一般设置选项中会明确标明 设置游戏音乐 与设置游戏音效。 客观的分析一下这两种形式的音乐,游戏背...

22560
来自专栏ytkah

3个技巧快速入门微信文章排版

  编辑微信图文消息,我们有时会先保存在word文档中,或者是企划部给你的新闻稿,里面有不同的字体(大小)、格式,如果我们直接Ctrl+c/v,那么领导很快会找...

32450

扫码关注云+社区

领取腾讯云代金券