1、新增边框属性
1.1 border-radius
设置盒子的圆角。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>border-radios</title>
<style>
div {
height: 400px;
width: 400px;
border: 1px solid black;
/* 同时设置四个方向的圆角 */
/* border-radius: 10px; */
border-radius: 50%;
/* 设置左上圆角 */
/* border-top-left-radius: 10px; */
/* 设置右上圆角 */
/* border-top-right-radius: 20px; */
/* 设置右下圆角 */
/* border-bottom-right-radius: 20px; */
/* 设置左下圆角 */
/* border-bottom-left-radius: 10px; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.2 outline
- outline-width:外轮廓宽度;
- outline-color:外轮廓颜色;
- outline-style:外轮廓风格;
- none:无轮廓;
- dotted:点状轮廓;
- dashed:虚线轮廓;
- solid:实线轮廓;
- double:双线轮廓。
- outline:宽度 样式 颜色
可以使用outline-offset属性设置外边框与盒子的距离。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>outline</title>
<style>
div {
height: 400px;
width: 400px;
border: 10px solid black;
padding: 10px;
background-color: aqua;
margin: 0 auto;
margin-top: 50px;
outline: 10px dashed rgb(0, 42, 255);
outline-offset: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>