css边框属性⼀：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;
borderbox
}
#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;
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。