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 伪类选择器快速复习小结
Sep 10 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
在PWS上安装PHP4.0正式版
2006/10/09 PHP
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
外国人聘用意向书
2014/04/01 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
2014年会计工作总结
2014/11/27 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
搞笑老公保证书
2015/02/26 职场文书
调解协议书范本
2016/03/21 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
golang实现浏览器导出excel文件功能
2022/03/25 Golang