神奇的CSS用法之border-radius
前言
近期看到一个css实现水滴效果视频,本着知其然知其所以然的心理对其研究了一番,整理了一下保姆级的border-radius教学分享给大家
了解作用
如果工作碰到有不配合的ui不愿意给你特效的gif图怎么办,咱们要学会自给自足,比如咱们门户网站需要一个水滴效果来展现,但是ui就是不给你图,要你自己写,这看完这篇你不就学会了吗
boder-radius
border-radius
:设置元素的圆角属性,可以设置百分比也可以设置像素单位
一个参数
设置一个参数的时候代表四个角的圆角属性
// html
<div class="box"></div>// css
.box{width: 300px;height: 300px;border: 2px solid aqua;border-radius: 50px;
}
两个参数
设置两个参数的时候,第一个参数代表:左上、右下 ,第二个参数代表:右上、左下
// html
<div class="box"></div>// css
.box{width: 300px;height: 300px;border: 2px solid aqua;border-radius: 50px 100px;
}
三个参数
设置三个参数的时候,第一个参数代表:左上 ,第二个参数代表:右上、左下,第三个代表:右下
// html
<div class="box"></div>// css
.box{width: 300px;height: 300px;border: 2px solid aqua;border-radius: 50px 100px 20px;
}
四个参数
设置四个参数的时候,第一个参数代表:左上 ,第二个参数代表:右上,第三个代表:右下,第四个参数代表左下
// html
<div class="box"></div>// css
.box{width: 300px;height: 300px;border: 2px solid aqua;border-radius: 20px 60px 100px 200px;
}
其它写法
除了上面的固定的写法还有一种比较少见的写法那就是中间用斜杠 / 分割开来,这种写法可以控制固定边的圆角, 斜杠左右都可以写四个参数
左侧四个参数
左侧四个参数分别代表上下两条边左右的上部分,下部分圆角
// html
<div class="box"></div>// css
.box{width: 300px;height: 300px;border: 2px solid aqua;border-radius: 20px 40px 60px 80px / 10px;
}
右侧四个参数
// html
<div class="box"></div>// css
.box{width: 300px;height: 300px;border: 2px solid aqua;border-radius: 20px / 40px 60px 80px 100px;
}
绘制水滴
准备我们需要的盒子
<div id="water"></div>
需要的样式 (注释有解释作用),给大家推荐一个绘制水滴形状的网站在这里直接cv就行了,另外box-shadow要是还有不太了解的可以查阅一下文档看看,这里就不做讲解了
*{margin: 0;padding: 0;box-sizing: border-box;
}
body{width: 100vw;height: 100vh;display: flex;justify-content: center;background-color: #c0d12b;/* 上面代码让盒子居中显示 */
}
#water{width: 300px;margin-top: 200px;height: 300px;/* 设置出盒子水滴形状 */border-radius: 42% 58% 77% 23% / 40% 31% 69% 60% ;/* 绘制出水滴阴影效果 */box-shadow: inset 10px 20px 30px rgba(0,0,0,0.5),10px 10px 20px rgba(0,0,0,0.3),15px 20px 30px rgba(0,0,0,0.05),inset -10px -10px 15px rgba(255,255,255,0.8);
}
水滴高光
给水滴加上高光效果,显示更逼真,这里我们利用伪元素就可以了
#water::after{content: '';width: 20px;height: 20px;position: absolute;top: 240px;left: 48%;background-color: rgba(255,255,255,0.8);border-radius: 51% 49% 35% 65% / 40% 54% 46% 60% ;animation: move 5s linear infinite alternate;
}
#water::before{content: '';width: 10px;height: 10px;position: absolute;top: 265px;left: 47%;background-color: rgba(255,255,255,0.8);border-radius:51% 49% 35% 65% / 59% 54% 46% 41% ;
}
水滴动画
最后加上水滴的动画
#water{width: 300px;margin-top: 200px;/**/height: 300px;/* border: 1px solid #000; */border-radius: 42% 58% 77% 23% / 40% 31% 69% 60% ;box-shadow: inset 10px 20px 30px rgba(0,0,0,0.5),10px 10px 20px rgba(0,0,0,0.3),15px 20px 30px rgba(0,0,0,0.05),inset -10px -10px 15px rgba(255,255,255,0.8);animation: move 4s linear infinite alternate;
}
@keyframes move{25%{border-right: 32% 68% 34% 66% / 44% 18% 82% 56% ;}50%{
border-radius:38% 62% 21% 79% / 56% 59% 41% 44% ;}100%{border-radius: 42% 58% 66% 34% / 38% 82% 18% 62% ;}
}
最后
整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。
有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享
部分文档展示:
文章篇幅有限,后面的内容就不一一展示了
有需要的小伙伴,可以点下方卡片免费领取
神奇的CSS用法之border-radius相关推荐
- 糟糕的css用法 1
现在网站追求越来越漂亮好看,越来越炫,所以css是必不可少的.可是我发现许多人使用css的方式是不对的,至少是不推荐的. 比如下面的css用法不对 (1)一个页面对应一个css文件 这种做法是我深恶痛 ...
- 如何使用CSS3 Border Radius属性
With CSS3, you can give any element "rounded corners" by using the border-radius property. ...
- 神奇的css(动态水滴)
当看到你的时候,哇哦,这感觉来了!好神奇的css吖 效果(是动态的水滴,这里只是一帧图片) 水滴样式网址 代码 <!DOCTYPE html> <html lang="en ...
- html盒子怎么设置边框长度,CSS应用篇 | border边框竟然可以这么用
原标题:CSS应用篇 | border边框竟然可以这么用 在我们平时网页中,想必大家一定用过border,可以根据border给我们提供的各种属性实现盒子的边框效果,那么今天就给大家分享一下边框的应用 ...
- [css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样
[css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样 <div style="width: 100%;height: 1px;"&g ...
- [css] css中的border:none和border:0px有什么区别?
[css] css中的border:none和border:0px有什么区别? none是没有边框. 0px是边框的宽度为0px. 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
- Normalize.css用法
1 Normalize.css用法 重置样式非常多,Normalize.css和reset是两个常用的重置 CSS 文件 http://necolas.github.io/normalize.css/ ...
- CSS盒子边框(border)样式综合样式
CSS盒子边框(border) 语法: border : border-width ll border-style ll border-color 边框的样式: none:没有边框即忽略所有边框的宽度 ...
- CSS 如何用border绘制三角形、等腰梯形、直角梯形
CSS 如何用border绘制三角形.等腰梯形.直角梯形 border 有宽度后,四角交接处会产生斜线,可根据此原理绘制三角形.等腰梯形.直角梯形等图形. div {width: 50px;heigh ...
最新文章
- go 向buff写入一个字节_我在 Go 中犯的 5 个错误
- C盘过满或者重装系统小技巧(不需要重做系统)
- ubuntu下安装Qt的过程以及遇到的问题和解决方案
- android 录屏自动运行,app自动化--Android通过adb录屏
- 6.1 图的深度优先和广度优先搜索
- 计算机组成要素六:编译器 语法分析器
- 将ABAP数据库表的定义导入到PostgreSQL
- 名词解释 算法的有限性_数据结构与算法期中考试卷(含答案)
- 合并数据 - 方法总结(concat、append、merge、join、combine_first)- Python代码
- 使用spring-data-mongodb操作mongodb
- 薏米到底有多强大?真是没想到还能这样吃~
- 软件测试系统学习流程和常见面试题
- div是html5新元素,HTML5编码新元素的介绍
- 限时免费抢!正版卡巴斯基安全部队2011激活码1年
- groupdel: cannot remove the primary group of user 'lxh1'的解决办法
- Linux IPTABLES 防火墙专题讲座 - 下篇-龙小威-专题视频课程
- 【JSP】EL表达式
- 杀怪物(dfs)题解
- 面试题:进程间通信的方式
- 数字趣解-不可思议的《魔兽世界》