border边框
1.CSS border 属性
允许您指定元素边框的样式、宽度和颜色。
solid - 定义实线边框
dashed - 定义虚线边框
border 属性是以下各个边框属性的简写属性:
border-width
border-style(必需)
border-color
简写border: 2px solid red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
border: 2px solid red;
}
</style>
<body>
<div>
</div>
</body>
</html>
没加之前border: 2px solid red;
加了之后:
2.CSS 圆角边框
border-radius 属性用于向元素添加圆角边框:
可设置圆角的所有四个 border-*-radius 属性。
上下的左右边框
加这个:
border-radius: 50px 50px 50px 50px;
效果图:
制作圆形
可以设置:
border-radius: 80%;()
上下的左右边框,圆角为80%,元素宽度的80%,设置为100%,靠近圆形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 30px;
height: 30px;
background-color: pink;
border: 2px solid red;
/* border-radius: 50px 50px 50px 50px;*/
border-radius: 80%;
}
</style>
<body>
<div>
</div>
</body>
</html>