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教程:边框属性border的极致应用
Apr 02 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 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
adodb与adodb_lite之比较
2006/12/31 PHP
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
自写的一个jQuery圆角插件
2010/10/26 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
python @classmethod 的使用场合详解
2019/08/23 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
中专毕业生自我鉴定
2013/11/21 职场文书
资产经营总监岗位职责范文
2013/12/01 职场文书
党校培训思想汇报
2014/01/03 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
小学社团活动总结
2014/06/27 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python