<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>盒模型-边框</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/* color: red; */
/*
边框
宽度 border-width
颜色 border-color
样式 border-style
*/
/*
border-width:10px;
默认值,一般都是3个像素
border-width可以用来指定四个方向的边框的宽度
值的情况
四个值:上 右 下 左
三个值:上 左右 下
两个值:上下 左右
一个值:上下左右
除了border-width还有一组 border-XXX-width
XXX可以是 top right bottom left
用来单独指定某一边的宽度
*/
/* border-width: 10px; */
/*
border-color用来指定边框的颜色,同样可以指定四个边的边框
规则和border-width一样
border-color也可以省略不写,如果省略了则自动使用color的颜色值
*/
/* border-color: orange; */
/*
border-style指定边框的样式
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线
border-style的默认值是none表示没有边框
*/
/* border-style: solid; */
/*
border简写属性,通过该属性可以同时设置边框左右的相关样式,并且没有顺序要求
除了border以外还有四个border-XXX
border-top
border-right
border-bottom
border-left
*/
/* border-right: 10px solid red; */
border: solid 10px orange;
border-right: none;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
027-盒子模型(边框)
最新推荐文章于 2023-04-21 14:27:42 发布