0

如何在以下内容中添加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.

4

2 回答 2

2

对于普通的 CSS，我认为没有内联 CSS 规则。你得到box-shadow了一个内联部分，但这并不适用于每个浏览器。

请查看以下 URL： 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;  
    }
于 2013-02-17T09:45:04.873 回答
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;
}
于 2013-02-17T09:55:39.477 回答