在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; 

這應該從理論上講，把你圈在所需位置。