一個帶有內部和外部邊框陰影的圓圈有1px邊框

我有一個圓形，內部和外部都有box-shadow，但有一個1px不需要的border.anyone可以幫助我去除邊框並告訴我爲什麼這只是發生在只有一圈。一個帶有內部和外部邊框陰影的圓圈有1px邊框

這裏是我的代碼 HTML

<div class="wrapper"> 
<div class="circle"></div> 
</div>

CSS

.wrapper{padding:30px;} 

.circle{ 
    width:120px; 
    height:120px; 
    border-radius: 50%; 
    box-shadow:inset 0 0 0 16px #f9f9f9, 0 0 0 16px #f1f1f1; 
    background:#32a500;}

你也可以找到它的小提琴。

http://jsfiddle.net/EFRke/2/

來源

2013-05-02 Manish Sharma

我覺得box-shadow: inset與border-radius搞亂。

在等待其他解決方案時，您始終可以避免使用inset，而是應用border，從div的高度和寬度手動刪除32px（16px + 16px）;

演示：http://jsfiddle.net/EFRke/3/

代碼：

.wrapper{padding:30px;} 

.circle{ 
    border-radius: 50%; 
    background:#32a500;  
    box-shadow: 0px 0px 0px 16px #f1f1f1; 
    border: 16px solid #f9f9f9; 
    width:88px; 
    height:88px; 
}

來源

2013-05-02 11:59:13

謝謝@Andrea Ligios的幫助。你的答案是非常有幫助的，在你的答案幫助下，我找到了一個更好的解決方案，或者可以說你的一個小更新。答案我添加框大小，所以我們不需要重新計算border.check的高度寬度這一個http://jsfiddle.net/EFRke/4/ – 2013-05-02 12:47:36

偉大的，+1到邊框:) – 2013-05-02 13:06:40

更新的代碼與@Andrea Ligios

.wrapper{padding:30px;} 

    .circle{ 
     border-radius: 50%; 
     background:#32a500;  
     box-shadow: 0px 0px 0px 16px #f1f1f1; 
     border: 16px solid #f9f9f9; 
     width:120px; 
     height:120px; 
     box-sizing:border-box; 
    }

來源

2013-05-02 12:49:14

一個帶有內部和外部邊框陰影的圓圈有1px邊框

回答

相關問題