Question

我正在制作一个网站，但是当我想让边框变得透明时，＆＃34;减去＆＃34;它来自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;
}

Answer 1

您可以使用background-clip：

＆＃13;

* {
  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;
}

＆＃13;

<div></div>

＆＃13;

Background-clip @ MDN

Support @ CanIUse.com

Answer 2

将此添加到您的边框属性，看看它是否符合您的要求。我发现了一个白色。

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

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

隐形边框无法正常工作

4 个答案: