隐形边框无法正常工作

Question

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

<!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;
}

Answer 1

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

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

Answer 2

您可以为此使用 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;
}

<div></div>

Background-clip @ MDN

Support @ CanIUse.com

Answer 3

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

我优化了你的css。你可以检查这个jsfiddle

Answer 4

边距绝对是你需要做的事情。寄宿生始终是 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%;
}

隐形边框无法正常工作

invisible border not working correctly

html

css

border