css盒子边框间距问题
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.one{border-style: solid solid solid solid;
border-width: 20px;
margin: 0px;
border-top-color:#7B6E00;
border-bottom-color: #6F4700;
border-left-color: #7B6E00;
border-right-color:#6F4700;
width: 350px;
height: 230px;
background-image: url("images/fengjing.jpg");}
.two{border-style: solid solid solidsolid;
border-bottom-color: #876F00;
border-left-color:#503F00;
border-top-color:#503F00;
border-right-color:#876F00;
border-width: 20px;
width: 390px;
height: 270px;}
</style>
</head>
<body>
<div class="two">
<div class="one">
</div>
</div>
</body>
</html>
代码如上!
就是边框之间出现了一条白线,也就是间距,请问如何让两个边框没有间距,就是让白线消失。
谢谢大佬! 弄好了 其实挺简单的 去除边距就行了
还有就是1句话能解决的事情你写了6句耶{:10_324:}所以我又交了你一招,解释再代码中哦
效果图图下
代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{
/* 去除边距 */
margin :0;
padding:0;
}
.one{
/* border-style: solid solid solid solid;
border-width: 20px;
margin: 0px;
border-top-color:#7B6E00;
border-bottom-color: #6F4700;
border-left-color: #7B6E00;
border-right-color:#6F4700; */
/* 可以简写为1句话 */
border: 20px solid #6F4700 ;
/* 我这里是截图量的宽高可能跟你的实际图片有差距 所以你应该明白吧 */
width: 494px;
height: 325px;
background-image: url("bz1.png");
}
.two{
/* 都加40 */
width: 534px;
height: 365px;
/**/
border:20px solid #503F00;
margin:0 auto;
/* border-style: solid solid solidsolid;
border-bottom-color: #876F00;
border-left-color:#503F00;
border-top-color:#503F00;
border-right-color:#876F00;
border-width: 20px; */
}
</style>
</head>
<body>
<div class="two">
<div class="one">
</div>
</div>
</body>
</html>
希望对你有所帮助
页:
[1]