如何在此元素中添加邊框？

Question

如何添加1px solid rgba(255,255,255,0.6)邊框，5px裏面以下fieldset？

結果應該是這樣的：

我只需要這是兼容Chrome的最新，火狐最新的，並且IE 9

這裏有一個JSFiddle，和我當前的代碼：

HTML

<fieldset>&nbsp;</fieldset> 

CSS

fieldset 
{ 
    background: #3AA0BD; 
    background: -moz-linear-gradient(top, #3AA0BD 0%, #06446E 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3AA0BD), color-stop(100%,#06446E)); 
    background: -webkit-linear-gradient(top, #3AA0BD 0%,#06446E 100%); 
    background: -o-linear-gradient(top, #3AA0BD 0%,#06446E 100%); 
    background: -ms-linear-gradient(top, #3AA0BD 0%,#06446E 100%); 
    background: linear-gradient(to bottom, #3AA0BD 0%,#06446E 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3AA0BD', endColorstr='#06446E',GradientType=0); 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    display: inline-block; 
    padding: 20px; 
    /* temp */ 
    height: 60px; 
    width: 500px; 
} 

的高度和寬度是未知的。我剛剛在這裏添加它們來填寫fieldset。

Answer 1

怎麼樣的包裝元素？ （JSFiddle）

通過OP編輯：這是我落得這樣做，因爲我已經有了一個form元素 '包裝' 的fieldset：

HTML

<form> 
    <fieldset>&nbsp;</fieldset> 
</form> 

CSS

form 
{ 
    background: #3AA0BD; 
    background: -moz-linear-gradient(top, #3AA0BD 0%, #06446E 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3AA0BD), color-stop(100%,#06446E)); 
    background: -webkit-linear-gradient(top, #3AA0BD 0%,#06446E 100%); 
    background: -o-linear-gradient(top, #3AA0BD 0%,#06446E 100%); 
    background: -ms-linear-gradient(top, #3AA0BD 0%,#06446E 100%); 
    background: linear-gradient(to bottom, #3AA0BD 0%,#06446E 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3AA0BD', endColorstr='#06446E',GradientType=0); 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    display: inline-block; 
    padding: 5px; 
} 

fieldset 
{ 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    border: 1px solid rgba(255,255,255,0.6); 
    padding: 20px; 
} 

Answer 2

與普通的CSS我不認爲有一個內聯CSS規則。你在內聯部分獲得了box-shadow，但這不適用於每個瀏覽器。

請參見本文下面的網址：http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/

哪些地方可以使用:before和:after創建另一個元素中，並position absolute它使整個內容中選擇減去邊框的寬度和高度。

#box { 
     background: #f4f4f4; 
     border: 1px solid #bbbbbb; 
     width: 200px; 
     height: 200px; 
     margin: 60px auto; 
     position: relative; 
    } 
    #box:before { 
     border: 1px solid white; 
     content: ''; 
     width: 198px; 
     height: 198px; 
     position: absolute; 
    } 
    #box:after { 
     content: ''; 
     position: absolute; 
     width: 196px; 
     height: 196px; 
     border: 1px solid #bbbbbb; 
     left: 1px; top: 1px; 
    }