css - 在 css 3 中做同样的事情

Question

你知道如何在 css 3 中做同样的“圆圈”吗？

我尝试了类似这样的双 div：

border-radius:50%; 
right:0; 
top:50px; 
width:200px; 
height:200px;

主 div ( rectangle ) 的溢出设置为隐藏。

Answer 1

你可以只用一个元素和一个边框+盒子阴影来实现这一点。

div{
    /*unimportant stuff*/
    right:-<x>px;bottom:-<y>px; /*replace x and y accordingly*/
    border-radius:50%;
    background:#bada55;               /*<- inner color*/
    border:30px solid #bada55;        /*<- inset color*/
    box-shadow:-1px -1px 0 1px red,   /*<- inside shadow color*/
          inset 1px 1px 0 1px  white; /*<- outside shadow color*/
}

查看演示，显然忽略了原始颜色；）

Answer 2

（未经测试）尝试：

border-radius:50%; 
width:200px; 
height:200px;
right: -100px;
bottom: -100px;

理论上，这应该将您的圆圈放在所需的位置。