1、圓角邊框 定義圓角邊框後，可以將盒子定義為圓角的 （1）長度方式 <html> <head> <meta charset="utf-8"> <title>盒子模型外邊距</title> <style> div{ width: 200px; height: 100px; background-co ...
1、圓角邊框
定義圓角邊框後，可以將盒子定義為圓角的
（1）長度方式
<html>
<head>
<meta charset="utf-8">
<title>盒子模型外邊距</title>
<style>
div{
width: 200px;
height: 100px;
background-color: yellowgreen;
border-radius:3px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
設置成高度的一半：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 100px;
background-color: yellowgreen;
border-radius:50px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
（2）百分比方式
圓形：長度為正方形的一半：
<html>
<head>
<meta charset="utf-8">
<title>盒子模型外邊距</title>
<style>
div{
width: 200px;
height: 200px;
background-color: yellowgreen;
border-radius:50%;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
百分比方式定義盒子：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 100px;
background-color: yellowgreen;
border-radius:5%;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
（3）不同的角設置不同的圓角
以左上角為起點，順時針的方式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: yellowgreen;
border-radius:10px 20px 30px 40px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
（4）選擇角去設置：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: yellowgreen;
border-bottom-right-radius: 16px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2、盒子陰影
（1）前兩個為必選項，後四個可寫可不寫
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: yellowgreen;
border-radius: 16px;
box-shadow:10px 10px 10px 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
（2） 只寫前兩個屬性：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: yellowgreen;
border-radius: 16px;
box-shadow:10px 10px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3、文字陰影
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
text-shadow: 5px 5px 6px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div>
人之初，性本善
</div>
</body>
</html>
