如何在圆角处添加阴影

Question

我正在尝试使用

为阴影添加阴影

box-shadow: 1px 1px 3px 10px black;

，但它带有方形边框。 如何将阴影添加到圆圈。

.circle {
  position: relative;
  display: block;
  margin: 2em 0;
  background-color: transparent;
  color: #fff;
  text-align: center;
  width: 40%;
    margin: 0 auto;
  box-shadow: 1px 1px 3px 10px black;
    
}

.circle:after {
  display: block;
  padding-bottom: 100%;
  width: 100%;
  height: 0;
  border-radius: 50%;
  background-color: #1E73BE;
  content: "";
}

.circle__inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.circle__wrapper {
  display: table;
  width: 100%;
  height: 100%;
}

.circle__content {
  display: table-cell;
  padding: 1em;
  vertical-align: middle;
}

<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">This is responsive circle</div>
</div>
</div>
</div>

Answer 1

将border-radius: 50%;添加到.circle

Jsfiddle

CSS

.circle {
  position: relative;
  display: block;
  margin: 2em 0;
  background-color: transparent;
  color: #fff;
  text-align: center;
  width: 40%;
    margin: 0 auto;
  box-shadow: 1px 1px 3px 10px black;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;

}

Answer 2

添加border-radius此课程.circle

＆＃13;

＆＃13;

.circle {
  position: relative;
  display: block;
  margin: 2em 0;
  background-color: transparent;
  color: #fff;
  text-align: center;
  width: 40%;
  margin: 0 auto;
  box-shadow: 1px 1px 3px 10px black;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
  border-radius: 50%;
    
}

.circle:after {
  display: block;
  padding-bottom: 100%;
  width: 100%;
  height: 0;
  border-radius: 50%;
  background-color: #1E73BE;
  content: "";
}

.circle__inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.circle__wrapper {
  display: table;
  width: 100%;
  height: 100%;
}

.circle__content {
  display: table-cell;
  padding: 1em;
  vertical-align: middle;
}

＆＃13;

<div class="circle">
<div class="circle__inner">
<div class="circle__wrapper">
<div class="circle__content">This is responsive circle</div>
</div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我建议您更改方法并使用position: absolute; .circle__content:after伪元素。最终代码如下：

.circle__content:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: transparent;
    z-index: -1;
    box-shadow: 0 0 5px #000;
}