html怎么设置border-radius,CSS border-radius 能做什么?
在CSS中,使用border-radius指定八个半径值时,可以创建不同的形状。先来看一个为该特性制定的工具。
简介
@Rachel Andrew今年在苏黎世的前端会议上谈到了CSS Grid布局的优势。在她演讲的最后,她提到了一个在我脑海中挥之不去的CSS 属性:
通过border-radius可以使图像有良好的形状效果。请不要忘记CSS仍然存在并且非常有用。你不需要为每个效果都使用一些花哨的东西 —— @Rachel Andrew
听完这个演讲之后,我认为你肯定可以创造出更多的圆圈,并开始深入挖掘使用border-radius可以做什么?
掌握这个特性
单值
让我们从基础开始。希望这不会令你厌烦。你可能对CSS很熟悉,也知道border-radius。早几年前就已经有这个属性,你可以看到他一般都是这样使用的,即使用一个单值:border-radius: 1em。它可能是2010年最受欢迎和讨论的CSS属性之一。
当你只使用一个值时,所有的角都会运用这个值:
正如你所看到的一样,border-radius的值可以使用固定值,比如px,rem或em为单位的值,你还可以使用百分比。通常设置border-radius的值为50%时可以创建一个圆(元素是一个正方形的情形之下)。百分比基于元素的width和height。所以当你在一个矩形上使用它时,将不再有对称的角。这里有一个例子,展示了border-radius值为110px和30%应用于矩形上的区别。
四个不同的值
当你使用多个值时,你可以为元素每个角设置值,从左上角开始,然后顺时针移动(top、right、bottom和left)。同样,。你也可以使用百分比,还可以将百分比和固定值混合使用。
由斜杠分隔的八个值
我想你们大多数人都已经使用过上面介绍的场景。接下来是最为关键的部分,也是令人兴奋的部分。如果使用斜杠分隔值,并指定最多八个值,会发生什么情况?规范是这样描述的:
如果斜杠前后都有值,那么斜杠前面的值设置是水平半径,斜框之后的值设置垂直半径。如果没有斜杠,则水平和垂直的半么相等。
因此,斜杠前面的值表示水平半径,而斜杠后面的值表示垂直半径。但这意味着什么呢?还记得矩形的百分比吗?垂直半径和水平半径以及不对称圆角的绝对值不同,这正是使用斜杠语法时得到的结果。
因此,当你使用border-radius: 4em 8em;和border-radius: 4em / 8em;时,结果是完全不同的。
老实说,你得到的形状有点奇怪。但是要记住,border-radius: 50%会得到一个圆,因为定义一边的两个值加起来等于100%(50% + 50% = 100%),并且没有留下直线,这让你想起了原来的正方形。如果你将相同的逻辑应用到八个值的border-radius中,你可以创建一个看起来有点像Plectrum或有机单元格的形状:
现在你已经知道border-radius总共有八个值,你可能会感到有点难过,因为我们的border-radius工具没有给你单独设置每个值的选项。
看看这个很酷的特性
html怎么设置border-radius,CSS border-radius 能做什么?相关推荐
- uniapp 开发APP 安卓手机中 在使用nvue时候 border的dashed和radius可能会有冲突的解决办法
uniapp 开发APP 安卓手机中 在使用nvue时候 border的dashed和radius可能会有冲突的解决办法 在开发中发现如果同时给了圆角 和 虚线 虚线属性会有问题 分别设置圆角 四个角 ...
- [css] 如何使用CSS3的属性设置模拟边框跟border效果一样?
[css] 如何使用CSS3的属性设置模拟边框跟border效果一样? <!DOCTYPE html> <html lang="en"> <head& ...
- html盒子怎么设置边框长度,CSS应用篇 | border边框竟然可以这么用
原标题:CSS应用篇 | border边框竟然可以这么用 在我们平时网页中,想必大家一定用过border,可以根据border给我们提供的各种属性实现盒子的边框效果,那么今天就给大家分享一下边框的应用 ...
- html正方形边框颜色,css边框颜色样式设置 css border颜色
DIV CSS边框颜色样式设置改变 css border边框样式可设置边框宽度.边框样式(css边框虚线.css边框实线).颜色样式.而css边框颜色只有设置边框宽度,设置边框颜色才能实现. 一.快速 ...
- css border画图
css border属性竟然可以用来画图,今天项目中遇到该问题,借此有机会深入了解了下. css border属性在我的印象当中只是方方正正的东西,无非就是增加边框的宽度,变换边框的颜色,因此一直以为 ...
- css ---border边框语法
一.四个边框 border-left 设置左边框,一般单独设置左边框样式使用 border-right 设置右边框,一般单独设置右边框样式使用 border-top 设置上边框,一般单独设置上边框样式 ...
- [css] css中的border:none和border:0px有什么区别?
[css] css中的border:none和border:0px有什么区别? none是没有边框. 0px是边框的宽度为0px. 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
- 11.CSS border边框
边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样式,默认的有上下左 ...
- ThreeJs中给立方体设置没有对角线的border
怎么给立方体设置没有对角线的border? wireframe会有对角线而且效果并不好~ 1.可以用vertical直接描边,只能从模型里处理,比较麻烦 2.用BoxHelper 直接这样就可以了实现 ...
- 怎样设置html设置透视,用css实现透视效果
用css实现透视效果 今天萌发一个想法,用css来实现透视效果.起初,我想到的是我们常见的添加阴影效果的方法,用多个div通过偏移来实现,但这需要很多 div,不够理想.随后,我想到css的一个属性: ...
最新文章
- 迈克尔 · 乔丹:我讨厌将机器学习称为AI
- Sequelize 4.43.0 发布,基于 Nodejs 的异步 ORM 框架
- 没有好看的 Terminal 怎么能够快乐地写代码
- MySQL批量检查表的脚本
- Android中的人脸检测入门
- Android SDK Manager 在win8.1上的闪退问题【转载】
- [转载] 一、第一个Flask程序
- Android签名证书生成
- GB28181国标错误码
- 计算机ps基础知识教案范文,PS基础教案 一学期全套教案.doc
- abbot_release
- 剪轴凝截Analdeta.Tessera.Pro.v3.2.2.Build.2015.10.05.Win64 1CD
- 传奇清理服务器信息,传奇行会信息等清除问题
- hdu1576 A/B
- Python安装distribute包
- 物联网平台有哪些商业模式
- 【杂记】DirectX9实现粒子特效
- 三星980处理器和骁龙855_骁龙855、麒麟980、Exynos9820谁最强?看完秒懂
- Vue——vue3+ts
- 常用的CSS默认样式
热门文章
- Task01:熟悉新闻推荐系统的基本流程(数据库设计)
- 如何编写系统设计说明书
- mysql数据库工资管理系统_数据库课程设计—企业工资管理系统(java版完整代码).doc...
- 【转】Unity 对象池(Object Pooling)理解与简单应用
- fatal: unable to access ‘‘xxx‘ : Faile to connect to github.com port 443: vscode提交到github 443错误 有梯子
- 数学分析教程(科大)——1.9笔记+习题
- Energyplus运行提示缺失.OCX文件的解决方法
- 台式计算机m4350,高配商用台式 联想启天M4350跌破五千
- sniffer安装问题
- 【Linux】U盘配合WinPE 安装debian8.6