Question

我有一个风格如此的div：

.oval {
    width: 100%;
    height: 30%;
    border-radius: 250px;
    font-weight: bold;
    line-height: 2em;
    font-size: 1em;
    color: #fff;
    text-align: center;
}

还有背景颜色。

我想为这个圈添加一个阴影。

这可能吗？

我看到了相互矛盾的信息，人们在图片中说出了这些信息，所以你无法对其应用任何风格，而其他人则认为这样的风格存在或存在一种方法。

Answer 1

您可以使用 box-shadow 属性：

＆＃13;

.oval {
    width: 100%;
    height: 30%;
    border-radius: 250px;
    font-weight: bold;
    line-height: 2em;
    font-size: 1em;
    text-align: center;
    box-shadow:0 0 2px 2px #999;
}

＆＃13;

<div class="oval">text</div>

＆＃13;

Answer 2

我认为你正在寻找盒子阴影：

-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
-moz-box-shadow:    0px 0px 30px 0px rgba(0, 0, 255, 0.67);
box-shadow:         0px 0px 30px 0px rgba(0, 0, 255, 0.67);

此链接说明了这一点：http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

此链接可让您体验一下：http://www.cssmatic.com/box-shadow

Answer 3

使用box-shadow属性：

.oval {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    font-weight: bold;
    font-size: 1em;
    color: #fff;
    text-align: center;
    display: block;
    background-color: red;
    box-shadow: 3px 3px 3px #aaa;
}

<div class="oval"></div>

Answer 4

盒子阴影！ https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

＆＃13;

.circle {
  width: 150px;
  height: 150px;
  background-color: yellow;
  border-radius: 50%;
  box-shadow: 5px 5px 5px #BC7046;
  position: absolute;
  top: 10px;
  left: 10px;
}
.circle2{
  box-shadow: -6px -6px 6px #BCAE46;
}

#square {
  border-radius: 5px;
  width: 170px;
  height: 170px;
  background-color: #D0DA72;
  position: relative;
}

＆＃13;

<div id=square>
  <div class=circle></div>
  <div class='circle circle2'></div>
</div>

＆＃13;

在border-radius div上设置阴影

4 个答案: