• 4.圆角边框

    提示：文章写完后，css样式新增了圆角边框样式，这样我们的盒子就可以变为圆角。

    1、语法：

                                div{
                                        border-radius：“length”；

                      这里的圆角，跟盒子的高度一半，就是圆角，如果不选择圆角就把值改小

                                      }

     

    解释:

          1、radius半径（圆的半径）原理：圆与边框的交集形成的圆角的效果。

          2、参数值可以为数值或者百分比的形式。

          3、如果正方形，想要设置一个圆，把数值修改为高度或者宽的一半即可，或者直接写50%。

          4、如果是一个矩形，设置为高度的一半就可以做。

           5、该属性是一个简写属性，可以跟四个值，分别代表：左上角、右上角、右下角、左下角。

     分开写：

         border-radius：10px;

    表示边框圆角左上角、右上角、右下角、左下角都为10像素。

        border-radius：10px   20px；

    表示边框圆角：左上角和右下角为10像素、右上角和左下角为10像素。

         border-radius:10px    20px     30px;

    表示边框圆角：左上角为10像素、右上角为20像素、右下角为10像素、左下角为30像素。

    如果一个一个方向写法：

    border-top-left-radius：10px；

    表示左上角边框为10像素

    border-top-right-radius:20px;

    表示右上角边框为20像素

    border-bottom-right-radius:30px;

    表示右下角边框为30像素

    border-bottom-left-radius:40px;

    表示左下角边框为40像素

    注意：

     border-radius：“20px”

    圆角边框的值越大，他的圆角半径更明显

    圆角边框的值越小，他的圆角半径不是特别明显。   

    边框4个值的方向：

    border-radius：“5px    10px     15px      20px”

    边框圆角：右上角为5像素、右下角为10像素、左下角为15像素、左上角为120像素。  

    自己代码展示：

    这个表示一个值的圆角边框：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>圆角边框title>
    9.     <style>
    10.         .box {
    11.             width: 400px;
    12.             /* 宽度 */
    13.             height: 200px;
    14.             /* 高度 */
    15.             background-color: pink;
    16.             /* 背景填充颜色 */
    17.             border: 1px solid red;
    18.             /* 边框、1表示粗细、solid表示实线、边框线颜色 */
    19.             margin: 100px auto;
    20.             /* 表示外边距、上下为100外边距、auto表示左右不变（还有居中效果） */
    21.             border-radius: 60px;
    22.             /* border-radius: 10px; */
    23.             /* 这个就是重点：
    24.              “border-radius”表示边框圆角、后面的值表示圆的半径
    25.              后面值越大、则显示出来圆角边框越明显
    26.                  值越小、则显示出来圆角边框越不明显 
    27.            自己理解：
    28.                就是把圆放到角哪里、然后在根据自己设置的值让圆发生变化、圆角就是用圆放到角哪里、跟着圆走、去掉多余90度角*/
    29.         }
    30.     style>
    31. head>
    32.  
    33. <body>
    34.     <div class="box">div>
    35.  
    36. body>
    37.  
    38. html>

    表示四个值的圆角边框：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>圆角边框、数值或百分比、属性值title>
    9.     <style>
    10.         .yuanxing {
    11.             width: 200px;
    12.             height: 200px;
    13.             /* border-radius: 100px; */
    14.             border-radius: 50%;
    15.             background-color: pink;
    16.         }
    17.         
    18.         .juxing {
    19.             width: 400px;
    20.             height: 200px;
    21.             background-color: pink;
    22.             border-radius: 200px;
    23.         }
    24.         
    25.         .radius {
    26.             width: 200px;
    27.             height: 200px;
    28.             background-color: pink;
    29.             /* border-radius: 10px 20px; */
    30.             /* 这个表示设置的左边上角和右边下角一样的10
    31.             这里右边上角和左边下角一样的
    32.             理解：
    33.                每一个圆角有对应的值都是一样的 */
    34.             /* border-radius: 10px 20px 30px; */
    35.             /* 这个先这样：
    36.             10表示左上角圆角边框
    37.             20表示右边上角的圆角
    38.             30表示右边下角的圆角
    39.             剩下的一个跟对应的那个角值一样的20 */
    40.             /* border-radius: 10px 20px 30px 40px; */
    41.             /* 这个表示:
    42.             可以理解为：顺时针看
    43.             左边上圆角为10
    44.             右边上圆角为20
    45.             右边下圆角为30
    46.             左边下圆角为40 */
    47.             border-top-left-radius: 10px;
    48.             /* 只能指定一个角；这个就是左上角、因为它的方位为top上方向意思、left表示左边所以就是左边上角 */
    49.         }
    50.     style>
    51. head>
    52.  
    53. <body>
    54.     <h4>1.圆形的做法h4>
    55.     <div class="yuanxing">div>
    56.     <h4>2.圆角矩形的做法h4>
    57.     <div class="juxing">div>
    58.     <h4>3.可以设置不同的圆角h4>
    59.     <div class="radius">div>
    60.  
    61. body>
    62.  
    63. html>

    显示结果：

    表示第一个结果：

     表示四个值的边框圆角：

    总结

    提示：这里对文章进行总结：
    例如：以上就是今天要讲的内容，本文仅仅简单介绍了圆角边框，四个值的圆角边框（顺时针）。

  • 相关阅读:
    超详细教程，一文入门Istio架构原理及实战应用
    【C++】map值自定义key，value排序（含ccfcsp第四次认证第二题演示和map遍历方法）
    U盘坏了数据可以恢复吗？超详细的U盘数据恢复图文教程！
    OceanMind海睿思入选弯弓研究院《2023中国营销技术生态图谱8.0》
    空城机在CSDN的四周年创作纪念日
    电脑重装系统后Win11用户名怎么更改
    力扣59-螺旋矩阵 II——边界判断
    数据分析工具Polars实现CSV读写、排序、应用函数、lazy API
    试用信号灯实现如图所示的进程同步关系
    MySQL大数据量高速迁移，500GB只需1个小时
  • 原文地址：https://blog.csdn.net/qq_62865634/article/details/127609000