10.css盒子模型-边框常用写法及简写
2020-02-17 本文已影响0人
欣博客
为元素设置边框
要为一个元素设置边框必须指定三个样式
border-width:边框的宽度
border-color:边框颜色
border-style:边框的样式
1.设置边框的宽度
/* 如果指定一个值，则四边全都是该值 */
border-width:10px ;
/*指定了四个值则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的*/
border-width:10px 20px 30px 40px ;
/* 指定三个值，则三个值会分别设置给 上 左右 下 */
border-width:10px 20px 30px ;
/* 指定两个值，则两个值会分别设置给 上下 左右*/
border-width: 10px 20px ;
/* 除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度 */
border-left-width:100px ;
2.设置边框的颜色
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
border-color: red;
border-color: red yellow orange blue;
border-color: red yellow orange;
border-color: red yellow;
3.设置边框的样式
可选值：
- none，默认值，没有边框
- solid 实线
- dotted 点状边框
- dashed 虚线
- double 双线
style也可以分别指定四个边的边框样式，规则和width一致，
同时它也提供border-xxx-style四个样式，来分别设置四个边
border-style: solid;
border-style: solid dotted dashed double;
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: #bfa;
/*
* 设置边框的宽度
*/
border-width:10px 20px 30px 40px ;
/*
* 设置边框的颜色
*/
border-color: red yellow orange blue;
/*
* 设置边框的样式
*/
border-style: solid;
/*border-style: solid dotted dashed double;*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
预览效果:
image.png
4.边框简写
边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
而且没有任何的顺序要求
border一指定就是同时指定四个边不能分别指定
border-top border-right border-bottom border-left
可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
border: red solid 10px;
border-left: red solid 10px;
border-top: red solid 10px;
border-bottom: red solid 10px;
border-left: red solid 10px;
border: red solid 10px;
border-right: none;
<!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;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
预览效果:
image.png
