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.手动内凹
如下是一种用一个圆和一个方形盒子叠加做出的内凹圆角的的效果。

 <div class="something-meaningful brdradius"></div>

 <div class="something-meaningful">

     <div>

         <a href="http://www.w3cplus.com/css3/css-secrets/inner-rounding.html"></a>

     </div>

 </div>    
 .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;}

 .brdradius {border-top-left-radius: 45%;}

 .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>
 .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>
 .uls{list-style-type: none;*zoom: -1;}

 .uls:after{content: "";clear: both;display: block;}

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

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>内凹圆角</title>

 <meta name="description" content="css3，内凹圆角">

 <meta name="author" content="郭菊锋702004176@qq.com"/>

 <style type="text/css">

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

 }

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

 }

 .brdradius {

 border-top-left-radius: 45%;

 }

 .something-meaningful> div {

 width: 100px;

 height: 100px;

 background: #fff;

 border-radius: 5em;

 position: absolute;

 top: -46px;

 left: 2px;

 /*padding: 1em;*/

 }

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

 }

 .uls{

 list-style-type: none;

 *zoom: -1;

 }

 .uls:after{

 content: "";

 clear: both;

 display: block;

 }

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

 }

 .li-boradiu{

 display: inline-block;

 width: 35px;

 height: 35px;

 /*background-color: #4169E1;*/

 background-image: radial-gradient(70px at 17.5px 0, #f00);

 }

 </style>

 </head>

 <body>

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

 <!--http://blog.csdn.net/playboyanta123/article/details/9303857-->

 <span class="egg"></span>

 <!--手动内凹！-->

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

 <div class="something-meaningful brdradius"></div>

 <div class="something-meaningful">

 <div>

 <a href="http://www.w3cplus.com/css3/css-secrets/inner-rounding.html"></a>

 </div>

 </div>

 <h3 style="clear: both;padding-top: 10px;">3.自己也来玩玩</h3>

 <span class="radius"></span>

 <p>这样 利用个背景色的径向渐变background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px);，就画出这么一个小内凹角来，想要另外方向的也可以变化。如下的一个完整案例</p>

 <ul class="uls">

 <li>1

 <span class="li-boradiu"></span>

 </li>

 <li>2

 <span class="li-boradiu"></span>

 </li>

 <li>3</li>

 </ul>

 <a href="http://blog.csdn.net/playboyanta123/article/details/9303857">参考资料：radial-gradient CSS3的蛋疼的径向渐变</a>

 </body>

 </html>

代码实现

CSS-论css如何纯代码实现内凹圆角的更多相关文章

  1. CSS布局技巧 -- 内凹圆角

    圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角 对于这种问题,很多人的反应 ...

  2. css边框内凹圆角，解决优惠券的边框问题

    关于css边框内凹圆角,找了好久才找到的 <html <head> <title>无标题页</title> <style> body{ backg ...

  3. CSS实现多重边框和内凹圆角

    CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  4. 纯代码实现CSS圆角

    我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了. 纯代码实现圆角主要有3种方法: 第一种:CSS3圆角   #chaomao{     border-radius:2px 2 ...

  5. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  6. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  7. CSS样式写在JSP代码中的几种方法

    1.行内样式. 可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css样式代码要写在style=" "双引号中才可以, 如: <p style=" ...

  8. CSS 魔法系列：纯 CSS 绘制各种图形《系列六》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  9. CSS 魔法系列：纯 CSS 绘制各种图形《系列五》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

随机推荐

  1. 项目分布式部署那些事（1）：ONS消息队列、基于Redis的Session共享，开源共享

    因业务发展需要现在的系统不足以支撑现在的用户量,于是我们在一周之前着手项目的性能优化与分布式部署的相关动作. 概况 现在的系统是基于RabbitHub(一套开源的开发时框架)和Rabbit.WeiXi ...

  2. [codeforces 519E]E. A and B and Lecture Rooms(树上倍增）

    题目:http://codeforces.com/problemset/problem/519/E 题意:给你一个n个点的树,有m个询问(x,y),对于每个询问回答树上有多少个点和x,y点的距离相等 ...

  3. JavaScript的理解记录（4）

    客户端JavaScript:客户端就是Web浏览器; 一. 前奏: Web文档(document):一些呈现静态信息的页面,虽然有的页面是会动的,但信息本身还是静态! Web应用:可以动态载入信息,相 ...

  4. JavaWeb之jsp编译为java源码的文件地址

    ..\..\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\project_ ...

  5. Linux chkconfig命令

    chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法:chkconfig [--ad ...

  6. 【UOJ #29】【IOI 2014】holiday

    http://uoj.ac/problem/29 cdq四次处理出一直向左, 一直向右, 向左后回到起点, 向右后回到起点的dp数组,最后统计答案. 举例:\(fi\)表示一直向右走i天能参观的最多景 ...

  7. 【BZOJ 1177】【APIO 2009】Oil

    http://www.lydsy.com/JudgeOnline/problem.php?id=1177 前缀和优化,时间复杂度$O(nm)$ 因为数据不全,快速读入会导致RE,切记! #includ ...

  8. 51nod 1007 正整数分组

    将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的.   Input 第1行:一个数N,N为正整数的数量 ...

  9. dede使用方法----更换模板

    刚开始接触dede的时候,自己一直在纠结怎么更换自己的模板啊.后面在秀站网上找到了一个比较好的更换模板的文字教程.下面就我自己做的进行写的笔记. 准备:一个你自己做好的静态版网站,我们假设它的名称是w ...

  10. log4net在Asp.net Mvc中的应用配置与介绍

    log4net在.NET中的地位就不多言语了,此篇文章着重配置.较少介绍使用.因为在网上你可以在网上搜到几十万的文章告诉你怎么用.安装的话也不废话了,很简单.Nuget里搜索一下"log4n ...