內邊界半徑在CSS沒有嵌套的div

我想設置內border-radius，（不是外部border-radius）我的div沒有嵌套div的
像這樣：
enter image description here
我的HTML源 jsfiddle 內邊界半徑在CSS沒有嵌套的div

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
    #s{ 
     width:200px; 
     height: 200px; 
     border:8px solid green ; 
     border-radius:8px; 
     background-color: red; 
     margin:0 auto; 
    } 
    </style> 
</head> 
<body> 
    <div id="s" > 

    </div> 
</body> 
</html>

在css3中可能有這個想法嗎？

來源

2014-02-18 M.Eskandari

這是不可能在我的應用程序！ –

你可以，但它不會使用我想，既然有z-index: -1;一旦有另一個背景就會去後面......

#s { 
    position: relative; 
    width:200px; 
    height: 200px; 
    border-radius:8px; 
    background-color: red; 
    margin:0 auto; 
} 
#s:before { 
    content:''; 
    z-index: -1; 
    background-color: green; 
    position: absolute; 
    top: -8px; 
    left: -8px; 
    width: 216px; 
    height: 216px; 
}

Demo

來源

2014-02-18 09:57:12 drip

謝謝。這很好！ –

這是可能的假冒本有幾個額外的屬性是outline和box-shadow。

CODEPEN DEMO

CSS

#s{ 
    width:200px; 
    height: 200px; 
    border-radius:8px; 
    background-color: red; 
    margin:0 auto; 
    outline:8px solid green; 
    -webkit-box-shadow:0 0 0 8px green; 
}

NB。 outline本身會在圓角處留下空隙。 box-shadow只是填補了空白。

來源

2014-02-18 10:05:30

太棒了！非常好。 –

比我的+1更好的解決方案。 – drip

非常感謝...花了我一兩分鐘。 :) –

內邊界半徑在CSS沒有嵌套的div

回答

相關問題