Question

嘿伙计们，我怎么能让边框内部划分框，但渐变在第一个：http://i.stack.imgur.com/HhTHT.png 我的代码：https://jsfiddle.net/ivailo/1hx4axpt/1/

.parent2{
height:256px;
width: 202px;
border: 1px solid #E18728;
background: linear-gradient(to bottom, rgba(185,219,105,1) 44%,rgba(209,211,172,1) 80%);
border-radius:5px;
}

Answer 1

您可以使用伪元素，例如::before

＆＃13;

.parent2 {
  height: 256px;
  width: 202px;
  border: 1px solid #E18728;
  background: rgba(209, 211, 172, 1);
  border-radius: 5px;
}
.parent2::before {
  content: '';
  display: block;
  height: 40px;
  border-bottom: 1px solid white;
  background: linear-gradient(to bottom, rgba(185, 219, 105, 1) 44%, rgba(209, 211, 172, 1) 80%);
  border-radius: 5px;
}

＆＃13;

<div class="parent2">
</div>

＆＃13;

Answer 2

从屏幕截图中，框顶部有一个边框，在这种情况下，创建一个子div并将渐变背景应用于它。所以对于html：

<div class="parent">
  <div class="child">
  </div>
</div>

对于CSS部分：

.parent {
    height:256px;
    width: 202px;
    border: 1px solid #E18728;
    border-radius:5px;
  background-color: rgba(209,211,172,1);
}

.child {
  height:40px;
  background: linear-gradient(to bottom, rgba(185,219,105,1) 44%,rgba(209,211,172,1) 80%);
  border-radius:5px;
  border-bottom: 1px solid white;
}

框由边界划分

2 个答案: