Question

这里我有两个按钮，第一个阴影中没有填充阴影。

在第二个中，我放了一个<hr>标签用填充物制作阴影。

如何在没有任何<hr>标记的情况下像第二个按钮一样制作阴影。

＆＃13;

.boxed {
  box-shadow: 0 2px 5px #000;
}
.round-corner {
  border-radius: 28px !important;
}
.padding-20{
  padding: 0 20px !important;
}
.fixed-in-top{
  margin-top: -1px !important;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<div class="col-sm-12 form-group">
  <div class="col-sm-4">
    <input type="button" class="btn btn-primary round-corner col-sm-12 boxed" value="Submit and Print">
  </div>
</div>

<div class="col-sm-12">
  <div class="col-sm-4">
    <input type="button" class="btn btn-primary round-corner col-sm-12" value="Submit and Print">
    <div class="col-sm-12 padding-20"><hr class="boxed fixed-in-top" /></div>
  </div>
  
</div>

＆＃13;

感谢您的时间。

Answer 1

您可以使用“展开半径”，box-shadow规范中的第4个数字，当为负数时，会缩小阴影。

.boxed {
  box-shadow: 0 20px 5px -15px rgba(0, 0, 0, 0.3);
}
.round-corner {
  border-radius: 28px !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<div class="col-sm-12 form-group">
  <div class="col-sm-4">
    <input type="button" class="btn btn-primary round-corner col-sm-12 boxed" value="Submit and Print">
  </div>
</div>

我作为练习留给你玩这些值来完全匹配你的另一个阴影，但这是要走的路。

Answer 2

您可以尝试使用pseudo元素。

＆＃13;

.boxed {
  position: relative;
  margin: 40px;
}
.round-corner {
  border-radius: 28px !important;
}
.padding-20{
  padding: 0 20px !important;
}
button.boxed:after {
    content: '';
    width: calc(100% - 30px);
    display: block;
    position: absolute;
    box-shadow: 1px 2px 2px red;
    height: 1px;
    left: 15px;
    top: 100%;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<div class="col-sm-12 form-group">
  <div class="col-sm-4">
    <button type="button" class="btn btn-primary round-corner col-sm-12 boxed">Submit</button>
  </div>
</div>

＆＃13;

在阴影中应用填充

2 个答案: