圓角邊框的css屬性是什麼

hzc原創: 2020-06-12 15:16:1510455瀏覽

圓角邊框的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屬性是什麼

橢圓形；

推薦教學：《css教學》

以上是圓角邊框的css屬性是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：前端特效之520表白神器-旋轉照片牆下一篇：前端特效之520表白神器-旋轉照片牆

看更多