邊框：border
圓角：border-radius
讓四個角都成圓角
示例：
HTML代碼
<div class="box">
</div>
style樣式代碼
<style>
.box{
background: green;
color: white;
width: 100px;
height: 50px;
border-radius: 20px;
text-align: center;
line-height: 50px;
}
</style>
image.png
圓角：
boorder-radius：讓四個角都圓角
數(shù)值：弧度的長度
數(shù)值1/數(shù)值2 ：
數(shù)值1代表角度水平方向的長度
數(shù)值2代表角度垂直方向的長度
一個值：代表4個方向
<div class="box">
</div>
<style>
.box{
background: green;
width: 100px;
height: 100px;
border-radius: 20px;
}
</style>
image.png
單獨設(shè)置某一個角度的圓角
bordr-top-left-radius：左上角
<div class="box">
</div>
<style>
.box{
background: green;
width: 100px;
height: 100px;
border-top-left-radius: 20px;
}
</style>
image.png
四個值：四個方向 左上 右上 右下 左下 順時針方向
三個值：左上 右上左下 右下
兩個值：左上右下 右上左下
值列表1/值列表2
值列表可以是1值或者2值或者4個值
值列表1全部代表水平方向
值列表2全部代表垂直方向
值單位
px
% ：相對于自身