0

次の中1px solid rgba(255,255,255,0.6)に境界線を追加するにはどうすればよいですか?5px fieldset

結果は次のようになります。

a

これは、最新の 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

ラッピング要素はどうですか？( 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 に答える
2

通常の CSS では、これに対するインライン CSS ルールはないと思います。box-shadowインライン パーツを使用できますが、これはすべてのブラウザーで機能するとは限りません。

次の URL を参照してください: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/

:beforeandを使用し: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 に答える