在css 3中做同样的事情

Question

你知道吗？我怎样才能在css 3中做同样的“圈子”？

我试图用类似的东西双DIV：

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

主要格（矩形）具有溢出设置为隐藏。

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*/ 
} 

退房的demo，显然忽略了原来的颜色;）

Answer 2

（未经测试）尝试：

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

这应该从理论上讲，把你圈在所需位置。