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像素。  

自己代码展示:

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角边框</title>
    <style>
        .box {
            width: 400px;
            /* 宽度 */
            height: 200px;
            /* 高度 */
            background-color: pink;
            /* 背景填充颜色 */
            border: 1px solid red;
            /* 边框、1表示粗细、solid表示实线、边框线颜色 */
            margin: 100px auto;
            /* 表示外边距、上下为100外边距、auto表示左右不变(还有居中效果) */
            border-radius: 60px;
            /* border-radius: 10px; */
            /* 这个就是重点:
             “border-radius”表示边框圆角、后面的值表示圆的半径
             后面值越大、则显示出来圆角边框越明显
                 值越小、则显示出来圆角边框越不明显 
           自己理解:
               就是把圆放到角哪里、然后在根据自己设置的值让圆发生变化、圆角就是用圆放到角哪里、跟着圆走、去掉多余90度角*/
        }
    </style>
</head>

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

</body>

</html>

表示四个值的圆角边框:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角边框、数值或百分比、属性值</title>
    <style>
        .yuanxing {
            width: 200px;
            height: 200px;
            /* border-radius: 100px; */
            border-radius: 50%;
            background-color: pink;
        }
        
        .juxing {
            width: 400px;
            height: 200px;
            background-color: pink;
            border-radius: 200px;
        }
        
        .radius {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 10px 20px; */
            /* 这个表示设置的左边上角和右边下角一样的10
            这里右边上角和左边下角一样的
            理解:
               每一个圆角有对应的值都是一样的 */
            /* border-radius: 10px 20px 30px; */
            /* 这个先这样:
            10表示左上角圆角边框
            20表示右边上角的圆角
            30表示右边下角的圆角
            剩下的一个跟对应的那个角值一样的20 */
            /* border-radius: 10px 20px 30px 40px; */
            /* 这个表示:
            可以理解为:顺时针看
            左边上圆角为10
            右边上圆角为20
            右边下圆角为30
            左边下圆角为40 */
            border-top-left-radius: 10px;
            /* 只能指定一个角;这个就是左上角、因为它的方位为top上方向意思、left表示左边所以就是左边上角 */
        }
    </style>
</head>

<body>
    <h4>1.圆形的做法</h4>
    <div class="yuanxing"></div>
    <h4>2.圆角矩形的做法</h4>
    <div class="juxing"></div>
    <h4>3.可以设置不同的圆角</h4>
    <div class="radius"></div>

</body>

</html>

显示结果:

表示第一个结果:

 表示四个值的边框圆角:


总结

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值