CSS3实现内凹圆角的实例代码


Posted in HTML / CSS onMay 04, 2017

圆角,大家一定都会做,border-radius, 内凹圆角如何实现?

可以拿个白色圆盒子盖住方形盒子的大半边实现,但是这样,是不透明的,背景发生改变时,就要改遮盖盒子的颜色,或者背景是渐变,改起来更麻烦,或背景是图片等等,就直接不太好改了,这种方法就有局限性。 说白了就是遮盖的那部分不透明以后,自适应性不强。

这里介绍一个用径向渐变实现的内凹圆角,可以解决上述问题。可以用 CSS 生成一个背景透明的内凹圆角。

1. 基本线性渐变

div {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red,blue);
}
<div>从左到右的红到蓝渐变</div>

2. 加百分比调整渐变范围

div {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red 20%,blue 80%);
}
<div></div>

3. 浓缩渐变范围,直至重合,形成一个红蓝分隔的两个色块

div {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red 50%,blue 50%);
}
 <div></div>

4. 颜色是可以设置透明色的,transparent, 将红色改成透明色,可以看到只有蓝色的色块了。

div {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,transparent 50%,blue 50%);
}

<div></div>

5. 同理联想到径向渐变,同样缩小渐变圈,直至重合,靠近圆心的颜色设成transparent。

/* 径向渐变主体 */ 
.raidal {
 height:100px;
 width:100px;
 background:radial-gradient(transparent 50%,blue 50%);
}
 <div class='raidal'></div>

6. 径向渐变是可以设置半径圆心位置的,所以设到左顶角,left top 调整半径大小为 200px,就发现背景透明的内凹圆角实现了。

应用时可以用伪元素设置,然后用绝对定位,子绝父相,调整位置,组合成想要的效果

/* 径向渐变主体 */ 
.raidal1 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
<div class='raidal1'></div>

7. 同理四个方向, 调整圆心位置即可

/* 左上 */ 
.raidal1 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
/* 右上 */ 
.raidal2 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at right top,transparent 50%,blue 50%);
}
/* 右下 */ 
.raidal3 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at right bottom,transparent 50%,blue 50%);
}
/* 左下 */
 .raidal4 {
 height:100px;
 width:100px;
 background:radial-gradient(200px at left bottom,transparent 50%,blue 50%);
} 
<div class='raidal1'></div> 
<div class='raidal2'></div>
 <div class='raidal3'></div>
 <div class='raidal4'></div>

8. 同样,不想这么圆角,也是可以椭圆的,半径设两个参数, 就是椭圆。

/* 左上 */ 
.ellipse {
 height:100px;
 width:100px;
 background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}
 <div class='ellipse'></div>

径向渐变有很多参数大家可以自己再尝试调整,可以出现各种奇怪的形状,这里就不演示了。相对来说,内凹圆角就够用了  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 #HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 #HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 #HTML / CSS
深入理解css中vertical-align属性
Apr 18 #HTML / CSS
总结30个CSS3选择器
Apr 13 #HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 #HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 #HTML / CSS
You might like
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
vue实现登录功能
2020/12/31 Vue.js
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
老生常谈进程线程协程那些事儿
2017/07/24 Python
如何完美的建立一个python项目
2020/10/09 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
施工人员岗位职责
2013/12/12 职场文书
直接有效的自我评价
2014/01/11 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
考核工作实施方案
2014/03/30 职场文书
管理标语大全
2014/06/24 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
2015年手术室工作总结
2015/05/11 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
Django Paginator分页器的使用示例
2021/06/23 Python
Pygame Rect区域位置的使用(图文)
2021/11/17 Python