这是别人做出来的显示效果
这是别人写的语言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 50px;
height:50px;
margin:5px;
}
.brd1{
border-width:2px;
border-style:solid;
border-color:red;
}
.brd2{
border:2px solid red;
}
.brd3{
border-bottom:1px solid red;
}
.line {
height:1px;
width:500px;
border-top:1px solid #e5e5e5;
}
</style>
</head>

<body>
<div class="brd1"></div>
<div class="brd2"></div>
<div class="brd3"></div>
<div class="line"></div>
</body>
</html>
这是我做出来的显示效果:
这是我写的语言(没有写完):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>border</title>
<style>
#box{width:50px;
height:50px;
margin:5px;
}
.one{border-width:2px;
border-style:solid;
border-color:red;
}
.two{border-width:2px;
border-style:solid;
border-color:red;
}
.three{border-bottom:1px solid red;}
</style>
</head>
<body>
<div id="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</body>
</htm
为了达到别人做出来呈现一样的效果,我在像素上都跟别人写的一模一样,但是我还是不太明白为什么我设置出来效果是不同的。
问题1:border-width这个属性设置它不是应该是上右下左四个宽度吗?我的代码中对于border-width的设置为2px,呈现效果不应该是一个正方形吗?
问题2:别人写的语言中,css代码 .line部分的height和width中我尝试过把他们删掉,然后将border-top的像素大小改动过,改动的效果呈现出来有以下情况:
要想达到别人做的line部分,就必须加width。 请问这是为什么呐?
/因为在尽量让自己把问题说的清楚一点,所以篇幅较长,谢谢友友们耐心看完,麻烦大家了/