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

Posted 来老铁干了这碗代码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了面试官问我圆角边框,我交出了满分的答卷!——Web前端系列学习笔记相关的知识,希望对你有一定的参考价值。


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前端系列学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

面试官问我:如何解决ABA问题?我给出接近满分的回答

阿里面试官问我:如何设计秒杀系统?我给出接近满分的回答

325碰到一个面试官问我jdk中生成动态代理类的API是什么?

面试官问我有没有java架构开发经验,java架构是啥?怎样才算是有架构开发经验?

面试官问我什么是 Nginx正向代理反向代理,我把这篇甩给了他

面试官问我注解的使用有没有踩过坑