神奇的CSS用法之border-radius

这篇具有很好参考价值的文章主要介绍了神奇的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;
} 
神奇的CSS用法之border-radius,css,ui,前端

两个参数

设置两个参数的时候,第一个参数代表:左上、右下 ,第二个参数代表:右上、左下

// html
<div class="box"></div>

// css
.box{width: 300px;height: 300px;border: 2px solid aqua;border-radius: 50px 100px;
} 
神奇的CSS用法之border-radius,css,ui,前端

三个参数

设置三个参数的时候,第一个参数代表:左上 ,第二个参数代表:右上、左下,第三个代表:右下

// html
<div class="box"></div>

// css
.box{width: 300px;height: 300px;border: 2px solid aqua;border-radius: 50px 100px 20px;
} 
神奇的CSS用法之border-radius,css,ui,前端

四个参数

设置四个参数的时候,第一个参数代表:左上 ,第二个参数代表:右上,第三个代表:右下,第四个参数代表左下

// html
<div class="box"></div>

// css
.box{width: 300px;height: 300px;border: 2px solid aqua;border-radius: 20px 60px 100px 200px;
} 
神奇的CSS用法之border-radius,css,ui,前端

其它写法

除了上面的固定的写法还有一种比较少见的写法那就是中间用斜杠 / 分割开来,这种写法可以控制固定边的圆角, 斜杠左右都可以写四个参数

左侧四个参数

左侧四个参数分别代表上下两条边左右的上部分,下部分圆角

// html
<div class="box"></div>

// css
.box{width: 300px;height: 300px;border: 2px solid aqua;border-radius: 20px 40px 60px 80px / 10px;
} 
神奇的CSS用法之border-radius,css,ui,前端

右侧四个参数

// html
<div class="box"></div>

// css
.box{width: 300px;height: 300px;border: 2px solid aqua;border-radius: 20px / 40px 60px 80px 100px;
} 
神奇的CSS用法之border-radius,css,ui,前端神奇的CSS用法之border-radius,css,ui,前端

绘制水滴

准备我们需要的盒子

<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% ;
} 
神奇的CSS用法之border-radius,css,ui,前端

水滴动画

最后加上水滴的动画

#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,ui,前端
有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享

部分文档展示:
神奇的CSS用法之border-radius,css,ui,前端
神奇的CSS用法之border-radius,css,ui,前端
神奇的CSS用法之border-radius,css,ui,前端
神奇的CSS用法之border-radius,css,ui,前端

文章篇幅有限,后面的内容就不一一展示了

有需要的小伙伴,可以点下方卡片免费领取文章来源地址https://www.toymoban.com/news/detail-721200.html

到了这里,关于神奇的CSS用法之border-radius的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css实现border渐变样式

    项目中用到了border的渐变使用,虽然可以使用图片,但不如代码实现效果好,所以实现了border两头渐变的效果 效果如图:

    2024年02月11日
    浏览(44)
  • css实现有缺口的border

    通常会有那种两个div都有border重叠在一起就会有种加粗的效果。 div1,div2,div3都有个 1px 的 border ,箭头标记的地方是没有处理解决的,很明显看着是有加粗效果的。其实这种感觉把div3的 width 减小 1px ,外加一个 margin-left:1px 应该也可以的。 我这里的这种主要注意class的 positio

    2024年02月15日
    浏览(33)
  • 前端:css less语法 /deep/ 深度影响的用法

    css中通常会在 style 标签内添加 scoped 来避免父组件对子组件的影响,添加了之后只能修改当前组件的样式。 这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值,从而避免父组件对子组件的样式的影响。 添加后控制台显示的样式就会像这样:     设置

    2024年02月12日
    浏览(42)
  • CSS3:border-image

    2024年04月25日
    浏览(31)
  • css3 hover border 流动效果

       

    2024年02月14日
    浏览(46)
  • 炫酷UI前端效果的CSS生成工具

    它创造了一种全新的UI风格。来自世界各地的设计师已经在Dribbble和Behance上看到了引人注目的中性设计。 而且这个工具,可

    2024年02月12日
    浏览(37)
  • css-文本垂直居中, 左侧border与文字作为导航标题

    1.文本垂直居中         1.1 Flexbox 布局         1.2Grid 布局: 2. 左侧border与文字作为导航标题

    2024年02月01日
    浏览(59)
  • 前端:UI 交互式特效 —— Css、Js

    😷😊🤺🤺🤺前期回顾 打造极简风格动效 —— 5 分钟轻松实现惊艳、震撼人心的视觉效果_彩色之外的博客-CSDN博客 😁 css动画 —— 把你喜欢css动画嵌入到浏览器中_css做的动画效果怎么嵌入网页_彩色之外的博客-CSDN博客  代码已上传资源   开头省略200字》…… 念及此  

    2024年02月16日
    浏览(40)
  • css中新型的边框设置属性border-inline

    border-inline 是 CSS Logical Properties and Values 模块中的一个属性,用于控制元素在流内(inline)方向上的边框。该模块旨在提供与书写模式(writing mode)无关的布局和样式描述方式,使得元素在不同书写模式(如ltr、rtl、ttb等)下能够统一、适当地处理边框,它和 border-block 的区别

    2024年04月28日
    浏览(29)
  • css画箭头图标放标题前面,旋转,border的单个边框设置

    CSS边框属性_css border dotted_小张biubiu的博客-CSDN博客 你还不知道css的旋转效果怎么实现?来这里看看吧_css旋转效果_我糖呢的博客-CSDN博客

    2024年02月09日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包