html – 如何制作边框叠加子div？

概述我必须使边框覆盖它的内容以匹配此图像的外观： 我得到了它的全貌： 我需要将边框覆盖为绿色内容.我怎么能完成它？正如我研究的那样,我不能使用z-index. HTML和CSS代码如下： .box-border a { color: white; text-transform: uppercase; font-weight: bold; font-size: 16px;}.box 我必须使边框覆盖它的内容以匹配此图像的外观：

我得到了它的全貌：

我需要将边框覆盖为绿色内容.我怎么能完成它？正如我研究的那样,我不能使用z-index. HTML和CSS代码如下：

.Box-border a {  color: white;  text-transform: uppercase;  Font-weight: bold;  Font-size: 16px;}.Box-border a:hover {  text-decoration: none;  color: white;  cursor: pointer;}.Box-border-participe {  position: relative;  float: right;  margin-right: 30%;  border: 4px solID white;}.Box-participe {  background-color: #94C120;  padding: 10px 40px;  margin-@R_419_6823@: 5px;  margin-top: 5px;  margin-bottom: -20px;  margin-right: -20px;}body {  background:grey;}

<div >  <div >    <a>Participe</a>  </div></div>

解决方法 您可以考虑使用伪元素来创建边框并避免额外的标记.您还可以轻松控制其位置/大小：

body {  background: grey;}.button {  background: #94c120;  wIDth: 200px;  height: 50px;  margin: 50px;  position: relative;}.button:before {  content: "";  position: absolute;  top: -15px;  @R_419_6823@: -15px;  wIDth: 100%;  height: 100%;  border: 5px solID #fff;  Box-sizing: border-Box;}

<div >  some text</div>

这是使用线性渐变和多个背景的另一个想法：

body { background:grey;}.button {  wIDth: 200px;  height: 80px;  margin: 50px;  padding:20px 0 0 20px;  Box-sizing:border-Box;  background:     linear-gradIEnt(to right,#fff 5px,transparent 5px calc(100% - 5px),#fff calc(100% - 5px)) 0 0/ calc(100% - 10px) calc(100% - 10px),linear-gradIEnt(to bottom,linear-gradIEnt(#94c120,#94c120) 15px 15px;  background-repeat:no-repeat;}

<div >  some text</div>

渐变的另一种语法：

body { background:grey;}.button {  wIDth: 200px;  height: 80px;  margin: 50px;  padding:20px 0 0 20px;  Box-sizing:border-Box;  background:     linear-gradIEnt(#fff,#fff) @R_419_6823@ -10px top     0  /100% 5px,linear-gradIEnt(#fff,#fff) top  -10px @R_419_6823@    0  /5px 100%,#fff) @R_419_6823@ -10px bottom 10px/100% 5px,#fff) top  -10px right  10px/5px 100%,#94c120) 20px 20px;   background-repeat:no-repeat;}

<div >  some text</div>

使用背景和盒子阴影的另一个想法：

body { background:grey;}.button {  wIDth: 200px;  height: 80px;  margin: 50px;  padding:15px 0 0 15px;  Box-sizing:border-Box;  background: #94c120 content-Box;  border:5px solID #fff;  Box-shadow: 20px 20px 0px #94c120; /* value of padding + border*/}

<div >  some text</div>

总结

以上是内存溢出为你收集整理的html – 如何制作边框叠加子div？全部内容，希望文章能够帮你解决html – 如何制作边框叠加子div？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。