一:css边框属性
1.上边框:
border-top-style:样式
border-top-width:宽度
border-top-color:颜色
border-top:宽度,样式,颜色
2.下边框:
border-bottom-style:样式
border-bottom-width:宽度
border-bottom-color:颜色
border-bottom:宽度,样式,颜色
3.左边框:
border-left-style:样式
border-left-width:宽度
border-left-color:颜色
border-left:宽度,样式,颜色
4.右边框:
border-right-style:样式
border-right-width:宽度
border-right-color:颜色
Border-right:样式,宽度,颜色
二:(1)设置边框样式(border-style)常用属性值如下
·none:没有边框,即忽略所有边框的宽度(默认值)
·solid:边框为单实线
·dashed:边框为虚线
·dotted:边框为点线
·double:边框为双实线
·border-top-style:上边框样式
·border-right-style:右边框样式
·border-bottom-style:下边框样式
·border-left-style:左边框样式
·border-style:上边框样式 右边框样式 下边框样式 左边框
·border-style:上边框样式 左右边样式 下边框样式
·border-style:上下边框样式 左右边框样式
·border-style:上下边框样式
(2)设置边框宽度(border-width)
·border-top-width:上边框宽度
·border-right-width:右边框宽度
·border-bottom-width:下边框宽度
·border-left-width:左边宽宽度
·border-width:上边框宽度[右边框宽度,下边框宽度,左边宽宽度]
(3)设置边框颜色(border-color)
·border-top-color:上边框颜色
·border-right-color:右边框颜色
·border-bottom-color:下边框颜色
·border-left-color:左边宽颜色
·border-color:上边框颜色[右边框颜色 下边框颜色 左边框]
(4)综合设置边框
border:宽度 样式 颜色;
P{border-top:2px solid #ccc;}//定义上边框,各个值顺序任意
例如将二级标题的边框设置为双实线,红色,3像素宽,代码如下: h2{border:3px double red;}
常用的复合属性有font-字体,border-边框,margin-外边距和background-背景等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css边框样式1</title>
<style type="text/css">
#OneBox{
width: 800px;
height: 800px;
background: red;
opacity: 0.5;
border: 4px solid rgba(0, 0, 0, 0.9); /* 定义边框粗细为3px 边框样式为实线 颜色为黑色 透明度为0.9 */
/*
边框的样式:solid:实线 dashed:虚线 dotted:点线 double:双线
*/
position: absolute;
top: 50%;
left: 50%;
margin: -400px 0 0 -400px;
}
#twoBox{
width: 600px;
height: 600px;
background: yellow;
border: 8px dashed green; /* 虚线 */
position: absolute;
top: 50%;
left: 50%;
margin: -300px 0 0 -300px;
}
#threeBox{
width: 400px;
height: 400px;
background: blue;
border: 12px dotted black; /* 点线 */
position: absolute;
top: 50%;
left: 50%;
margin: -200px 0 0 -200px;
}
#fourBox{
width: 200px;
height: 200px;
background: green;
border: 16px double black; /*双线*/
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -120px;
}
</style>
</head>
<body>
<div id="OneBox">
<div id="twoBox">
<div id="threeBox">
<div id="fourBox">
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css边框样式2</title>
<style type="text/css">
*{
padding: 0px; margin: 0px;
}
#OneBox{
width: 800px;
height: 800px;
background: red;
opacity: 0.5;
border: 4px solid rgba(0, 0, 0, 0.9); /* 定义边框粗细为3px 边框样式为实线 颜色为黑色 透明度为0.9 */
/*
边框的样式:solid:实线 dashed:虚线 dotted:点线 double:双线
*/
/*
单独写法
单独设置某一边框的某一属性 宽度 边框样式 颜色
*/
border-left-width: 40px;
border-left-style: dashed;
border-left-color: green;
position: absolute;
top: 50%;
left: 50%;
margin: -400px 0 0 -400px;
}
#twoBox{
width: 600px;
height: 600px;
background: yellow;
border: 8px dashed green; /* 虚线 */
/*
复合写法1 设置某一条边框的全部属性
设置右边框为50px 点状边框 绿色
*/
border-top: 50px dotted green;
position: absolute;
top: 50%;
left: 50%;
margin: -300px 0 0 -300px;
}
#threeBox{
width: 400px;
height: 400px;
background: blue;
border: 12px dotted black; /* 点线 */
/*
复合写法2——设置全部边框的某一属性
*/
border-width: 10px 16px; /* 上下 左右 */
border-style: solid double dashed; /* 上 左右 下 */
border-color: white red green black; /* 上 右 下 左 */
position: absolute;
top: 50%;
left: 50%;
margin: -200px 0 0 -200px;
}
#fourBox{
width: 200px;
height: 200px;
background: green;
border: 16px double black; /*双线*/
/*
复合写法3——设置全部边框为同样的属性
*/
border: 10px solid purple;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -120px;
}
</style>
</head>
<body>
<div id="OneBox">
<div id="twoBox">
<div id="threeBox">
<div id="fourBox">
</div>
</div>
</div>
</div>
</body>
</html>