文章目录
边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: #bfa;
border: red solid 10px;
border-right: none;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
1. 边框说明
- 大部分的浏览器中，边框的宽度和颜色都是有默认值的，
- 而边框的样式默认值都是 none
.box {
width: 200px;
height: 200;
background-color: #bfa;
border-width: 10px;
border-color: red;
border-style: solid;
border-right: none;
}
2. 为元素设置边框
2.1. 说明
- 要为一个元素设置边框必须指定三个样式
- border-width：边框的宽度
- border-color：边框颜色
- border-style：边框的样式
.box1 {
width: 300px;
height: 300px;
background-color: #bfa;
border-width: 10px;
border-color: red;
border-style: solid;
}
2.2. border-width
- 使用 border-width 可以分别指定四个边框的宽度
- 如果在 border-width 中制定了四个值
- 则四个值分别设置给上 右 下 左，顺时针的方向设置的
- 如果指定三个值，
- 则三个值会分别设置给 上 左右 下
- 如果指定两个值
- 则两个值会分别设置给 上下 左右
- 如果指定一个值 - 则四边全都是该值
除了 border-width，CSS 中还提供了四个 border-xxx-width
xxx 的值可能是 top right bottom left
专门用来设置指定边的宽度
.box1 {
width: 300px;
height: 300px;
background-color: #bfa;
/* border-width: 10px 20px 30px 40px; */
/* border-width: 10px 20px 30px; */
/* border-width: 10px 20px; */
border-width: 10px;
/* border-left-width: 100px; */
border-color: red;
border-style: solid;
}
2.3 border-color
- 使用 border-color 可以设置边框的颜色
- 和宽度一样，color 也提供了四个方向的样式，可以分别指定颜色
- border-xxx-color
.box1 {
width: 300px;
height: 300px;
background-color: #bfa;
border-width
最低0.47元/天 解锁文章
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
