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.手动内凹
如下是一种用一个圆和一个方形盒子叠加做出的内凹圆角的的效果。
<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如何纯代码实现内凹圆角的更多相关文章
- CSS布局技巧 -- 内凹圆角
圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角 对于这种问题,很多人的反应 ...
- css边框内凹圆角，解决优惠券的边框问题
关于css边框内凹圆角,找了好久才找到的 <html <head> <title>无标题页</title> <style> body{ backg ...
- CSS实现多重边框和内凹圆角
CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- 纯代码实现CSS圆角
我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了. 纯代码实现圆角主要有3种方法: 第一种:CSS3圆角 #chaomao{ border-radius:2px 2 ...
- Bootstrap css栅格 + 网页中插入代码+css表格
设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- CSS样式写在JSP代码中的几种方法
1.行内样式. 可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css样式代码要写在style=" "双引号中才可以, 如: <p style=" ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
随机推荐
- Replace Pioneer注册
以下是目前合法长期使用Replace Pioneer的唯一方法(除了购买之外): Replace Pioneer过期后,会弹出一个注册(Registration)窗口,其中有一个试用选项(Trial ...
- 为什么带网格（mesh）的模型添加了刚体Rigidbody和MeshCollider，还是会从地板穿过去？
两个Gameobject 放置在空中, 一个是Cube,一个是茄子模型 Cube的Collider 是Box Collider , 茄汁的Collider 是mesh collider, 他们都添加了 ...
- X240s安装Win7 以及如何启用ExpressCache
新买了一台X240S笔记本,尝试了带的Win8正版一个月后,实在无法适应Win8,干脆退回Win7完事,以下为安装过程, 第一步:制作启动U盘 首先,下载一个iso格式的Win7安装镜像文件,利用微软 ...
- 构造函数的return返回值
3 1. 2. 3.
- 实现解耦-Spring.Net
spring.net属于IOC(中文名:控制反转)的思想实现. 概念解释: 控制反转概念: 控制反转(Inversion of Control,缩写为IoC),是面向对象编程中的一种设计原则,可以用来 ...
- nginx location语法使用说明
语法规则: location [=|~|~*|^~] /uri/ { … } = 开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url做编码,因 ...
- 聚类算法kmeans
1. 聚类问题 所谓聚类问题,就是给定一个元素集合D,其中每个元素具有n个可观察属性,使用某种算法将D划分成k个子集,要求每个子集内部的元素之间相异度尽可能低,而不同子集的元素相异度尽可能高. 2. ...
- Bete冲刺第三阶段
Bete冲刺第三阶段 今日工作: web: 检索了各类资料,今日暂时顺利解决了hibernate懒加载异常的问题,采用的凡是也比较简单就是添加了一个OpenSessionInViewFilter的过滤 ...
- Bete冲刺第四阶段
Bete冲刺第四阶段 今日工作: web: 昨晚搞得很晚,帮队友搞定了git的问题,仓库顿时干净多了,同时已经基本完成了基础功能的接口 ios: 导入并使用了改善交互的第三方开源库,修正路径BUG 目 ...
- zabbix proxy 服务器 netstat 出现大量Time_Wait连接问题
问题描述: 监控系统云网关监控几万个TCP port的存活情况, 最近发现有几个端口出现告警闪断情况,怀疑因为运行TCP检查的 zabbix proxy 服务器 tcp参数配置不合理. netstat ...