Question

有一项任务是制作非常不寻常的设计块的html / css：enter image description here

有什么想法吗？

这是我的代码：但阴影图像不显示在FF中:(

<section class="service-block">
            <div class="container">
                <div class="row">
                    <div class="item">
                        <object data="" type="">
                        <svg viewbox="-7 -1 24 19" style="background-image: url('/img/ic_advantages-1_calc.png')">
                            <path d="M-10 -1 H30 V18 H-10z M 5 8 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0z"/>
                            <image x="0" y="0" xlink:href="/img/circle_shadow.png" ></image>
                        </svg>
                        </object>

                        <div class="info">
                            <div class="title"><a href="">Some link</a></div>
                            <div class="price">from 3 000 <span class="rub">₽</span>per year</div>
                            <div class="inluded"><a href="">Go?</a></div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

Answer 1

这是我如何做到的......用一个div。

径向渐变和阴影。

body {
  background: #c0ffee;
}
div {
  width: 200px;
  height: 250px;
  margin: 1em auto;
  background: radial-gradient(circle at center 75px, transparent, transparent 50px, red 50px);
  -webkit-filter: drop-shadow(0px -4px 4px black);
-     filter: drop-shadow(0px -4px 4px black);
  overflow: hidden;
}

<div></div>

OR

具有巨型盒子阴影和阴影的伪元素

body {
  background-color: #c0ffee;
}
div {
  width: 200px;
  height: 250px;
  margin: 1em auto;
  -webkit-filter: drop-shadow(0px -4px 4px black);
  filter: drop-shadow(0px -4px 4px black);
  overflow: hidden;
  position: relative;
}
div:after {
  position: absolute;
  content: '';
  width: 100px;
  height: 100px;
  box-shadow: 0 0 0 1000px red;
  border-radius: 50%;
  left: 50px;
  top: 35px;
}

<div></div>

Answer 2

如何使用position：relative来圆化子元素的角。此外，如果有2个这样的阴影块，它会重叠如下：https://yadi.sk/i/1lXwqKTatpvue

如何在填充方形div中制作透明圆圈的html / css？

2 个答案: