Question

如何在1px solid rgba(255,255,255,0.6)内添加5px边框，fieldset ？

结果应该是这样的：

我只需要与Chrome最新版本，Firefox最新版本和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

使用普通的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;  
    }

Answer 2

包裹元素怎么样？（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;
}

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

2 个答案: