隐形边框无法正常工作答案

【问题标题】：invisible border not working correctly隐形边框无法正常工作
【发布时间】：2016-01-25 17:43:18
【问题描述】：

我正在制作一个网站，但是当我想让边框透明以从 div 中“减去”它时，它不起作用。谁能告诉我发生了什么以及我该如何解决这个问题？另外，当我放大边界时，边界会变大，但其余的却不会，有人能告诉我一个解决办法吗？这是代码：

<!DOCTYPE html>
<html>
<head>
    <title> Homepagina </title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <meta charset="utf-8">

    <!--Dit laadt het Raleway lettertype: -->
    <link href='https://fonts.googleapis.com/css?family=Raleway:200,300' rel='stylesheet' type='text/css'>

    <!--Dit laadt jQuery: -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"> </script>
</head>




<body>

    <div class="topBar">
        hoi 
    </div>

    <div class="jumbotron">
        <div class="overMij">

        </div>

        <div class="hobbies">

        </div>

        <div class="muziek">

        </div>

        <div class="informatica">

        </div>
    </div>

</body>

html, body { 
    margin: 0;  
    width: 100%; 
    height: 100%;
    background-image: url(background.jpg)
}

.topBar {
    height: 10%;
    width: 100%;
    background-color: blue;

}

.jumbotron {
    height: 90%;
    width: 100%;
}

.overMij {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    background-color: green;
    background-size: 100%;
    width: 60%;
    height: 50%;
    float: left;
    border-radius: 50px;
    border: solid white 25px;
}

.hobbies {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    background-color: green;
    background-size: 100%;
    width: 40%;
    height: 50%;
    float: right;
    border-radius: 50px;
    border: solid white 25px;
}

.muziek {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    background-color: green;
    background-size: 100%;
    width: 40%;
    height: 50%;
    float: left;
    border-radius: 50px;
    border: solid white 25px;
}

.informatica {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    background-color: green;
    background-size: 100%;
    width: 60%;
    height: 50%;
    float: right;
    border-radius: 50px;
    border: solid white 25px;
}

【问题讨论】：

你希望那里没有边界吗？
@kfreeman04208 我希望背景颜色不是 div 的整个高度和宽度，所以我尝试了填充和边距，但 60% 和 40% 很难，所以我尝试了边框，这似乎工作，但我希望边框透明并显示背景，如果你明白我的意思
哪个边界？里面有 4 个。
@Candy_In_Mah_Van 边界的目的是什么？要在divs 之间添加空格吗？
@alirezasafian 是的，就是这样

标签： html css border

【解决方案1】：

将此添加到您的边框属性，看看它是否是您想要的。我找到了一个白色的。

border: 25px solid rgba(255,255,255, 1);

【讨论】：

也不起作用，它使边框变深绿色而不是显示背景

【解决方案2】：

边距绝对是您需要做的事情。寄宿生始终是 div 的一部分。您不应该使用它们来分隔 div。以下是为您更新的 CSS 和 Codepen：

http://codepen.io/anon/pen/PPRBMe

.overMij {  
    background-color: black;
    background-size: 100%;
    width: 58%;
    height: 48%;
    float: left;
    border-radius: 50px;
    margin: 1%
}

.hobbies {
    background-color: grey;
    background-size: 100%;
    width: 38%;
    height: 48%;
    float: right;
    border-radius: 50px;
    margin: 1%;
}

.muziek {
    background-color: purple;
    background-size: 100%;
    width: 38%;
    height: 38%;
    float: left;
    border-radius: 50px;
    margin: 1%;
}

.informatica {
    background-color: green;
    background-size: 100%;
    width: 58%;
    height: 38%;
   float: left;
    border-radius: 50px;
    margin: 1%;
}

【讨论】：

【解决方案3】：

您可以使用margin 代替transparent 边框。

我优化了你的 CSS。你可以查看这个jsfiddle

【讨论】：

【解决方案4】：

您可以为此使用background-clip：

* {
  box-sizing: border-box;
}

body {
  background: #bada55;
}

div {
  width: 250px;
  height: 250px;
  margin: 25px auto;
  border:2px solid grey;
  padding:10px;
  background: #f00;
  background-clip: content-box;
}

&lt;div&gt;&lt;/div&gt;

Background-clip @ MDN

Support @ CanIUse.com

【讨论】：

也许你可以做一个问题的演示。