border-radius 属性

CSS3的圆角边框实际上是在矩形的四个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。

CSS3的圆角边框使用border-radius 属性来实现，基本语法如下所示：

border-radius: 1-4  length | % /1-4  length | %;

其中：length用于设置对象的圆角半径长度，不可为负值。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则表示水平和垂直半径相等。
另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置。如果省略 bottom-left，则与 top-right 相同，如果省略 bottom-right，则与 top-left 相同，如果省略 top-right，则与 top-left 相同。

border-radius的其他写法

border-radius是一种缩写的方式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，也就是以下四种写法：

border-top-left-radius: <length>  <length>   //左上角
border-top-right-radius: <length>  <length>  //右上角
border-bottom-right-radius:<length>  <length>  //右下角
border-bottom-left-radius:<length>  <length>   //左下角
// 他们的参数都是先y轴然后x轴

代码实例

<!DOCTYPE html>
<html lang="en">
<head><!--过渡 transition--><meta charset="UTF-8"><title>CSS3 圆角边框</title><style>body{   /*定义了背景颜色*/padding: 0;background-color: #F7F7F7;}div{margin: 20px;float: left;}/*饼环*/.border-radius{width: 40px;height: 40px;/*边框*/border: 70px solid #93baff;/*直径与盒子边相等时，为圆*/border-radius: 90px;}/*四边不同色*/.border-radius1{width: 0px;height: 0px;border : 90px solid;/*边框颜色可以定义很多种*/border-color: #ff898e #93baff #c89386 #ffb151;}</style>
</head>
<body>
<div class="border-radius"></div>
<div class="border-radius1"></div>
</body>
</html>

效果图

面试官问我圆角边框，我交出了满分的答卷！——Web前端系列学习笔记相关推荐

面试官问你想找什么工作_找工作时如何面试面试官
面试官问你想找什么工作在技术面试中要问的十二个问题 (Twelve questions to ask at tech interviews) I've just come off six wee ...
面试官问：select......for update会锁表还是锁行？
欢迎关注方志朋的博客,回复"666"获面试宝典 select查询语句是不会加锁的,但是select .......for update除了有查询的作用外,还会加锁呢,而且它是悲观锁 ...
面试官问：数据库 delete 表数据，磁盘空间还是被一直占用，为什么?
以下文章来源方志朋的博客,回复"666"获面试宝典最近有个上位机获取下位机上报数据的项目,由于上报频率比较频繁且数据量大,导致数据增长过快,磁盘占用多. 为了节约成本,定期进行数 ...
面试官问：Kafka 会不会丢消息？怎么处理的?
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! Kafka存在丢消息的问题,消息丢失会发生在Broker, ...
面试官问：Integer 如何实现节约内存和提升性能的？
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料作者:Byte_Liu 来源:https://urlify.cn/ ...
面试官问我：一个 TCP 连接可以发多少个 HTTP 请求？我竟然回答不上来...
点击上方"方志朋",选择"设为星标" 做积极的人,而不是积极废人作者 | 松若章来源 | https://zhuanlan.zhihu.com/p/6142 ...
面试官问：请拿出一段体现你水平的代码，我该如何回答？
程序员面试,免不了被问代码问题.如果面试官问你,最能代表你的当下水平的代码是什么?你该怎么回答呢?知乎的几位作者给出了优秀答案. 每天下班前半小时都会运行这段. #include <stdlib ...
后处理程序文件大小的变量_【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？...
关注「松宝写代码」,精选好文,每日一题作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
当面试官问我ArrayList和LinkedList哪个更占空间时，我这么答让他眼前一亮
前言今天介绍一下Java的两个集合类,ArrayList和LinkedList,这两个集合的知识点几乎可以说面试必问的. 对于这两个集合类,相信大家都不陌生,ArrayList可以说是日常开发中用的 ...

面试官问我圆角边框，我交出了满分的答卷！——Web前端系列学习笔记

文章目录

border-radius 属性

border-radius的其他写法

代码实例

效果图

面试官问我圆角边框，我交出了满分的答卷！——Web前端系列学习笔记相关推荐

最新文章

热门文章