Home / Questions / 158892
Accepted
Jheyman Mejia
Asked: 2020-04-25 13:21:50 +0800 CST 2020-04-25 13:21:50 +0800 CST

div中的内边框

  • 772

我正在创建一个菱形/菱形（它实际上是一个 45°角的正方形哈哈），设计灵感来自路标。如何让黑色边框不只是在边缘，而是在里面？

我用这张任何交通信号灯的图像更好地解释自己：

交通灯

$(document).ready(function() {
  $("#navMenu").click(function() {
   //$(".nav").toggleClass("small");
    if ($(".nav").hasClass("small")) {
      $(".nav").removeClass("small");
    } else {
      $(".nav").addClass("small");
    }
  });
});
html, body, .container {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}

.container {
  /*padding:150px;*/
  background: #ebebeb;
}

#navMenu {
  top: 150px;
  left: 200px;
  width: 240px;
  height: 240px;
  z-index: 100;
  border:5px solid #000;
  
  
  background: linear-gradient(90deg, #ffb900, #CCFF00, #ffb900);
  -webkit-background: linear-gradient(90deg, #ffb900, #CCFF00, #ffb900);
  background-size: 400% 400%;
  -webkit-background-size: 400% 400%;
  animation: gradient 5s infinite;
  -webkit-animation: gradient 5s infinite;
}

#navMenu:hover, .nav:hover {
  background: #ffb900;
}

@keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}
@-webkit-keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}

.diamond {
  position: absolute;
  width: 67.5px;
  height: 67.5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  background: #910EC9;
  margin: 10px;
  cursor: pointer;
  box-shadow: 1px 4px 10px #101010;
 

}

.diamond:active {
  background: #710b9e;
  box-shadow: 0px 1px 2.5px #101010;
  transition: 0.1s;
  -webkit-transition: 0.1s;
}

/*.popUp{
  text-align:center;
  border-radius:10px 0px;
  position:absolute;
  top:100px;
  left:330px;
  overflow:hidden;
  background:red;
  width:0px;
  max-width:100px;
}

.#nav1:hover + .popUp{
  width:100px;
}*/

.nav {
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.small {
  top: 186px;
  left: 236px;
  z-index: 10;
  background: #643fc1;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.rotCorrect {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-left: 14px;
  margin-top: 8px;
}

#mainRotCorrect {
  margin-left: 26px;
  margin-top: 28px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  max-width: 90px;
}

i {
  color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="container">
    <div id="navMenu" class="diamond">
      <div id="mainRotCorrect" class="rotCorrect"><i class="fa fa-user-plus fa-5x" aria-hidden="true"></i></div>
    </div>
    
  </div>
</body>

css

2 Answers

  1. Best Answer

    使用 box-shadow，这允许您使用一个或多个边框，如果您将第三个值保留为 0，它不会模糊但看起来像普通边框：

    .rombo{
  background: yellow;
  border: yellow 2px solid;
  box-shadow: inset 0 0 0 2px black;
}


    body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.rombo{
  display: inline-block;
  background: gold;
  border: gold 5px solid;
  box-shadow: inset 0 0 0 5px black, 8px 8px 20px rgba(0,0,0,.5);
  width: 100px;
  height: 100px;
  transform: rotateZ(45deg);
}
    <div class="rombo"></div>

    与上面的示例相同，但有更多的边框，关键是您可以用逗号分隔它们并添加任意数量的边框：

    body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.rombo{
  display: inline-block;
  background: gold;
  border: gold 5px solid;
  box-shadow: 
     inset 0 0 0 5px black,
     0 0 0 5px black,     
     0 0 0 10px gold,  
     0 0 0 15px black,    
     0 0 0 20px gold, 
     8px 8px 20px 15px rgba(0,0,0,.5);
  width: 100px;
  height: 100px;
  transform: rotateZ(45deg);
}
    <div class="rombo"></div>

    在您的情况下，它会在带有框阴影的菱形上添加一条相同背景颜色的粗线，在背面阴影之前并增加阴影的厚度，如下所示：

    .rombo{
  box-shadow: 
    0 0 0 5px #910EC9,
    1px 4px 15px #101010;
}

    这是在您的特定情况下的外观：

    $(document).ready(function() {
  $("#navMenu").click(function() {
   //$(".nav").toggleClass("small");
    if ($(".nav").hasClass("small")) {
      $(".nav").removeClass("small");
    } else {
      $(".nav").addClass("small");
    }
  });
});
    html, body, .container {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}

.container {
  background: #ebebeb;
}

#navMenu {
  top: 150px;
  left: 200px;
  width: 240px;
  height: 240px;
  z-index: 100;
  border:5px solid #000;  
  background: linear-gradient(90deg, #ffb900, #CCFF00, #ffb900);
  background-size: 400% 400%;
  animation: gradient 5s infinite;
}

#navMenu:hover, .nav:hover {
  background: #ffb900;
}

@keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}
@-webkit-keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}

.diamond {
  position: absolute;
  width: 67.5px;
  height: 67.5px;
  transform: rotate(45deg);
  background: #910EC9;
  margin: 10px;
  cursor: pointer;
  box-shadow: 
    0 0 0 5px #ffb900,
    1px 4px 15px #101010;
  }

.diamond:active {
  background: #710b9e;
  box-shadow: 0px 1px 2.5px #101010;
  transition: 0.1s;
}

.nav {
  transition: 0.5s;
}

.small {
  top: 186px;
  left: 236px;
  z-index: 10;
  background: #643fc1;
  transition: 0.5s;
}

.rotCorrect {
  transform: rotate(-45deg);
  margin-left: 14px;
  margin-top: 8px;
}

#mainRotCorrect {
  margin-left: 26px;
  margin-top: 28px;
  transform: rotate(-45deg);
  max-width: 90px;
}

i {
  color: #000;
}
    <body>
  <div class="container">
    <div id="navMenu" class="diamond">
      <div id="mainRotCorrect" class="rotCorrect"><i class="fa fa-user-plus fa-5x" aria-hidden="true"></i></div>
    </div>
    
  </div>
</body>

    • 3

  2. 您必须添加两个轮廓：

    轮廓：5px 实心#CCFF00；
    和
    轮廓：5px 实心#ffb900；

    $(document).ready(function() {
  $("#navMenu").click(function() {
   //$(".nav").toggleClass("small");
    if ($(".nav").hasClass("small")) {
      $(".nav").removeClass("small");
    } else {
      $(".nav").addClass("small");
    }
  });
});
    html, body, .container {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}

.container {
  /*padding:150px;*/
  background: #ebebeb;
}

#navMenu {
  top: 150px;
  left: 200px;
  width: 240px;
  height: 240px;
  z-index: 100;
  border:5px solid #000;
  outline: 5px solid #CCFF00;
  
  
  background: linear-gradient(90deg, #ffb900, #CCFF00, #ffb900);
  -webkit-background: linear-gradient(90deg, #ffb900, #CCFF00, #ffb900);
  background-size: 400% 400%;
  -webkit-background-size: 400% 400%;
  animation: gradient 5s infinite;
  -webkit-animation: gradient 5s infinite;
}

#navMenu:hover, .nav:hover {
  background: #ffb900;
  outline: 5px solid #ffb900;
}

@keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}
@-webkit-keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}

.diamond {
  position: absolute;
  width: 67.5px;
  height: 67.5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  background: #910EC9;
  margin: 10px;
  cursor: pointer;
  box-shadow: 1px 4px 10px #101010;
 

}

.diamond:active {
  background: #710b9e;
  box-shadow: 0px 1px 2.5px #101010;
  transition: 0.1s;
  -webkit-transition: 0.1s;
}

/*.popUp{
  text-align:center;
  border-radius:10px 0px;
  position:absolute;
  top:100px;
  left:330px;
  overflow:hidden;
  background:red;
  width:0px;
  max-width:100px;
}

.#nav1:hover + .popUp{
  width:100px;
}*/

.nav {
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.small {
  top: 186px;
  left: 236px;
  z-index: 10;
  background: #643fc1;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.rotCorrect {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-left: 14px;
  margin-top: 8px;
}

#mainRotCorrect {
  margin-left: 26px;
  margin-top: 28px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  max-width: 90px;
}

i {
  color: #000;
}
    <!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="container">
    <div id="navMenu" class="diamond">
      <div id="mainRotCorrect" class="rotCorrect"><i class="fa fa-user-plus fa-5x" aria-hidden="true"></i></div>
    </div>
    
  </div>
</body>

    • 1