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>
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » CSS3新增边框属性（五）
发表评论 取消回复