參考資料
- 作者：天剛萌萌亮
來源：CSDN
css3中border-radius的8個屬性值
原文：https://blog.csdn.net/wmeng13/article/details/80691057
學習資料
- 作者：果汁涼茶
來源：CSDN
CSS深度挖掘 - 「Border-radius」的八個值
原文：https://blog.csdn.net/xinruliushui/article/details/79176890
- 作者：果汁涼茶
來源：CSDN
只使用一個塊級元素繪制各種圖形
原文：https://blog.csdn.net/xinruliushui/article/details/79233492
border-radius的8個屬性值
border-radius詳細例子展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin: 100px 100px;
border: 2px solid red;
/* x軸 上1 右2 下3 左4/y軸上5 右6 下7 左8*/
border-radius:5px 10px 15px 20px/15px 20px 30px 50px;}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果圖展示
圓角和盒子陰影應用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圓角和盒子陰影應用</title>
<style>
.one {
width: 200px;
height: 100px;
background-color: greenyellow;
border-radius: 200px 0 200px 0 / 100px 0 100px 0;
}
.two {
width: 200px;
height: 100px;
background-color: greenyellow;
border-radius: 200px 0 200px 0 / 100px 0 100px 0;
box-shadow: 10px 10px;
}
.three {
width: 200px;
height: 100px;
background-color: greenyellow;
border-radius: 200px 0 200px 0 / 100px 0 100px 0;
box-shadow: 20px 20px 5px 5px green,40px 40px 5px 5px;
margin-bottom: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
