div 태그의 테두리에있는 텍스트

이 질문은 오래된 질문이지만, div 태그의 테두리에 텍스트를 삽입하는 가장 좋은 방법은 무엇인지 알고 싶습니다. 이것은 내가 div 태그의 테두리에있는 텍스트

.componentWrapper { 
 
    border: solid cadetblue; 
 
    border-radius: 40px; 
 
    padding: 10px; 
 
    width: 95%; 
 
}

<div class='componentWrapper'>Text inside div </div>

내가 div 태그의 경계에 타이틀을 추가 할 수있을 것입니다. 하나의 옵션이 필드 세트를 사용하는 것임을 알고 있지만이 접근법을 사용하지 않는 것이 좋습니다. 또 다른 방법은 상자를 넣고 위로 옮겨 놓고 배경색을 설정하는 것입니다.하지만 페이지에 다른 배경색을 설정하면 실패 할 것입니다.

가장 적합한 솔루션은 무엇입니까?

출처

2017-03-07 tmp dev

. 나는 이것이 막연한 픽셀 매칭으로 멈추었으므로 2 (합리적인) 옵션,'fieldset' 또는 테두리/텍스트 용 SVG를 사용합니다 ... 크로스 브라우저 지원을 위해 다음과 같이'fieldset'을 권장합니다. 나는 아무 것도 볼 수 없다. ** 어떤 이유도 원하지 않는다. 아무리 좋은 이유라도 사용된다면 요소를 사용하면된다. 그렇지 않으면 잘못된 코드로 끝날 것이다. – LGSon

그러나 이것이 형식이 아니기 때문에 나는 fieldset을 사용하지 않기를 바랍니다. –

해당 유효 기간 없음 : http://stackoverflow.com/questions/9812898/is-it-wrong-to-use-the-fieldset-tag-without-form-tag – LGSon

나는 position:absolute를 사용하여, 그런 일을 제안 : 나는 내부`span` 및 의사 요소 ... 20 분 후 시작

.componentWrapper { 
 
    border: solid cadetblue; 
 
    border-radius: 40px; 
 
    padding: 15px 10px 10px; 
 
    width: 95%; 
 
} 
 

 
.componentWrapper .header { 
 
    position:absolute; 
 
    margin-top:-25px; 
 
    margin-left:10px; 
 
    color:white; 
 
    background:cadetblue; 
 
    border-radius:10px; 
 
    padding:2px 10px; 
 
}

<div class='componentWrapper'><div class="header">Headline</div>Text inside div </div>

출처

2017-03-08 13:15:22 Psi

div 태그의 테두리에있는 텍스트

답변

관련 문제