圓角邊框的css屬性是什麼-css知識-PHP中文網

圓角邊框的css屬性是什麼

hzc

發布： 2020-06-12 15:16:15

原創

10641 人瀏覽過

圓角邊框的css屬性是什麼

圓角邊框的css屬性是什麼：

1.圓角邊框簡介

就是透過border-radius屬性對元素的四個角進行設定｛屬性不具有繼承性｝。

border-radius有四個屬性分別是top，left，right，bottom，可以進行設定像素。也可以直接設定一個值四邊都是相等的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{border: 5px solid red;
        border-radius: 50px;
        width: 50px;
        height: 100px;
        background-color: yellowgreen;
        margin:auto;
        box-shadow: 100px 100px 40px green;}
    </style>
</head>
<body>
<div></div>
     
</body>
</html>

登入後複製

圓角邊框的css屬性是什麼

也可以同時設定兩個值border-radius: 50px 99px;對應的分別是上下是50px,左右是99px。也可以設定三個值按順時針設定border-radius: 50px 99px 40px;其中的上面是50px，左面右面是99px,底邊是40px。

2.也可以使用border-radius：r來設定圓形這裡的r是指半徑的大小（有長度單位），要建立圓形應該設定r的值為元素的高度和長度的一半。當高寬相等時這種值的方法就是圓形改變寬和高就朝橢圓形發展了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{border: 5px solid red;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        margin:auto;
        box-shadow: 100px 100px 40px green;}
    </style>
</head>
<body>
<div></div>
     
</body>
</html>

登入後複製

圓形：

圓角邊框的css屬性是什麼