1、圓角
使用CSS3 border-radius 屬性，你可以給任何元素製作“圓角”
border-radius屬性，可以使用以下規則：
①四個值：第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角
②三個值：第一個值為左上角，第二個值為右上角和左下角，第三個值為右下角
③兩個值：第一個值為左上角與右下角，第二個值為右上角與左下角
④一個值：四個圓角值相同
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
.a1{
width: 100px;
height: 100px;
background-color: blueviolet;
border-radius: 10px;
}
.a2{
width: 100px;
height: 100px;
background-color: blueviolet;
border-radius: 100%;
}
.a3{
width: 100px;
height: 100px;
background-color: blueviolet;
border-radius: 10px 50px 30px 10px;
}
2、陰影
box-shadow向框新增一個或多個陰影。
box-shadow：h-shadow v-shadow blue color;
| 值 | 描述 |
| h-shadow | 必選，水平陰影的位置 |
| v-shadow | 必選，垂直陰影的位置 |
| blue | 可選，模糊距離 |
| color | 可選陰影的顏色 |
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
.a1{
width: 400px;
height: 400px;
background-color: blueviolet;
margin: 0 auto;
box-shadow: 10px 10px 20px rgb(0, 0,0.5 );
}
.a2{
width: 400px;
height: 400px;
background-color: blue;
margin: 0 auto;
box-shadow: -10px -10px 20px rgb(0, 0,0.5 );
}
.a3{
width: 400px;
height: 400px;
background-color: red;
margin: 0 auto;
box-shadow: 0px 10px 20px rgb(0, 0,0.5 );
}