이 요소 내부에 테두리를 추가하려면 어떻게해야합니까?

Question

1px solid rgba(255,255,255,0.6) 국경을 5px안에 어떻게 추가 할 수 있습니까? 다음은 fieldset입니까?

나는 단지이 9

가 여기 JSFiddle, 내 현재 코드의 크롬 최신 파이어 폭스 최신, 그리고 IE와 호환 가능해야합니다

결과는 다음과 같이해야한다 :

HTML

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; 
} 

높이와 폭

CSS는 알려져 있지 않다. 방금 fieldset을 작성하기 위해 여기에 추가했습니다.

Answer 1

래핑 요소는 무엇입니까? OP에 의해 편집 (JSFiddle는)

: 이것은 내가 이미 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이 있지만 모든 브라우저에서 작동하지는 않습니다.

이 다음 URL을 참조하십시오 : 당신이 그렇게 전체 내용을 선택 내부 및 position absolute 다른 요소를 뺀 경계의 폭과 높이를 만들 :before 및 :after을 사용할 수 있습니다 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/

.

#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; 
    }