woshijunjun 发表于 2021-4-28 11:59:32

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>
代码如上!
就是边框之间出现了一条白线,也就是间距,请问如何让两个边框没有间距,就是让白线消失。
谢谢大佬!

肖-肖 发表于 2021-4-28 12:32:04

弄好了 其实挺简单的 去除边距就行了
还有就是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]
查看完整版本: css盒子边框间距问题