<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>边框颜色</title>
<style type="text/css">
div{
/* background-color: red; */
width:500px;
height:500px;
/* border-style:dashed;
border-width:20px;
border-color:#0000FF #008000 #00FFFF #DEB887; */
/* border-top-color:#0000FF;
border-right-color:#008000;
border-bottom-color:#00FFFF;
border-left-color:#DEB887; */
/* border:20px dashed yellow; */
/* border-width border-style border-color
border-top/right/bottom/left-width/style/color; */
border:2px solid;
border-radius: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>边框宽度</title>
<style type="text/css">
div{
background-color: red;
width:500px;
height:500px;
border-style:double;
border-width:10px 20px 30px 40px;/*10px 20px|10px 20px 30px*/
/* border-top-width:10ox;
border-right-width:20px;
border-bottom-width:30px;
border-left-width:40px; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框
border:5px solid red;
border-top...
border-style: outset;
border-style: solid dotted dashed double; 上右下左
border-right..-style
border-style: none; 没有边框
border-width: 5px;thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px
border-width: 15px 5px 15px 5px;
border-width: 15px 5px; 值复制
border-right..-width
border-color: blue rgb(25%,35%,45%) #909090 red;
border-right...-color
border-color: transparent; 透明边框，有边框，只不过不可见
border-radius 边框转角
