圓角到一個textarea

Question

請參閱附加的圖像和的jsfiddle：http://jsfiddle.net/chqy9dja/

一個簡單的文本區域，帶有圓角。注意滾動條出現在右上角和右下角的問題。屏幕截圖是通過Chrome瀏覽器進行的，但所有其他瀏覽器都會共享此錯誤。

我知道這可以用jquery/javascript插件修復，但是我正在尋找一種只用css的方法。

我只需要在滾動條和邊框之間添加一些填充。

試過這個，迄今爲止最好的解決方案：將textarea封裝在div中，而不是div的樣式。工作中，只關注元素時出現小問題。

嘗試用輪廓替換邊框，並使用css添加輪廓偏移。很好的工作，問題是，輪廓不能有圓角。

請任何其他的想法嗎？直接在textarea上設置樣式，而不是包裝div。

<textarea id="a" class="a" /> 

.a { 
    width: 300px; 
    height: 300px; 
    border-radius: 10px; 
    border: 1px solid #000; 
} 

Answer 1

正如你所提到的，outline不能有圓角。一種選擇是使用border和box-shadow的組合。

例如，你可以給元素的transparent邊框和適當box-shadow如下：

Example Here

textarea { 
    width: 300px; 
    height: 300px; 
    border-radius: 10px; 
    box-shadow: 0 0 0 3px #000; 
    border: 5px solid transparent; 
}