1、新增边框属性
1.1 border-radius
设置盒子的圆角。
<!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属性设置外边框与盒子的距离。
<!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>
