2.边框相关属性

2.1.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>
      .box {
        width: 300px;
        height: 200px;
        border: 5px solid red;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

border-radius: 可以设置四个角度的值,值的设置顺序和margin的顺序类似,顺时针设置

练习1: 画圆形


#circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%
}
  

练习2: 椭圆形

#oval {
  width: 200px;
  height: 100px;
  background: red;
  border-radius: 100px / 50px;
}

练习3: 上三角形


#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
  

练习4: 下三角形

#triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}

练习5: 左三角形

#triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}

2.2.box-shadow

可以设置盒子的阴影

/*
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
*/
box-shadow: h-shadow v-shadow blur spread color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css3</title> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:red;
	box-shadow: 10px 10px 5px #999999;
}
</style>
</head>
<body>

<div></div>

</body>
</html>