기본 HTML 요소를 사용하여 테두리로 텍스트를 추가하는 방법

많은 HTML 요소는 기능적이지만 최신 웹 디자인 미학과 충돌하는 기본 스타일을 가지고 있습니다.<fieldset></fieldset> 그리고<legend></legend> , 일반적으로 양식 컨트롤을 그룹화하는 데 사용되며 테두리 텍스트를 작성하기위한 고유 한 솔루션을 제공합니다. 이 조합은 본질적으로 국경선이 텍스트를 교차하지 않고 테두리 내에 위치합니다. 이 기사는 세련된 테두리 텍스트 디자인을 만들기 위해이 기능을 활용하는 간단하면서도 효과적인 방법을 보여줍니다.

우리는 4 개를 사용하여 디자인을 구성 할 것입니다<fieldset></fieldset> 요소, 각각 a<legend></legend> 테두리 텍스트의 요소. 핵심 원칙은 원하는 효과를 달성하기 위해 이러한 요소의 경계를 조작하고 이러한 요소의 위치를 ​​조작하는 것을 포함합니다.

먼저, 우리는<fieldset></fieldset> 테두리를 제어하기 위해 스타일을 적용하는 요소. 각각의 상단 테두리 만<fieldset></fieldset> 보일 것입니다. 다른 사람들은 투명하게 만들어졌습니다. 또한 box-sizing: border-box 사용하여 국경 및 패딩을 포함한 일관된 크기를 보장합니다. 스태킹은 그리드와 같은 다양한 레이아웃 방법을 사용하여 달성 할 수 있습니다.

손을 씻으세요

분리하십시오

마스크를 착용하십시오

집에 머물러

 몸 {
  디스플레이 : 그리드;
  마진 : 자동;
  마진 - 탑 : calc (50vh -170px);
  너비 : 300px;
  높이 : 300px;
}

필드 셋 {
  국경 : 10px 고체 투명;
  테두리 색상 : 검은 색;
  박스 사이징 : 국경 박스;
  그리드 영역 : 1 / 1;
  패딩 : 20px;
  너비 : 상속;
}

측면과 바닥 경계를 만들려면 마지막 3 개를 회전시킵니다.<fieldset></fieldset> CSS를 사용하는 요소 변환 :

 / * 오른쪽으로 회전 */
필드 셋 : nth-of-type (2) {변환 : 회전 (90deg); }
/ * 하단으로 회전 */
필드 셋 : nth-of-type (3) {변환 : 회전 (180deg); }
/ * 왼쪽으로 회전 */
필드 셋 : nth-of-type (4) {변환 : 회전 (-90deg); }

다음으로, 우리는 스타일입니다<legend></legend> 강요. 결정적으로, 정확한 테두리 정렬에는 작거나 제로 line-height 필수적입니다. 더 큰 선 높이는 테두리를 대체하여 디자인을 방해 할 수 있습니다. 또한 CSS 변환을 사용하여 바닥의 방향을 수정합니다.<legend></legend> 부모의 회전으로 인해 역전 된 요소<fieldset></fieldset> .

 전설 {
  글꼴 : 15pt/0 'Averia serif libre';
  마진 : 자동;
  패딩 : 0 4px;
}

Fieldset : nth-of-type (3)> 범례 {
  변환 : 회전 (180deg);
}

첫 번째 이미지 추가<fieldset></fieldset> 디자인을 향상시킵니다. 경계 내의 수평 텍스트 정렬은 margin-left 및 margin-right 속성을 사용하여 조정할 수 있습니다. 두 여백의 auto 값은 텍스트 중심입니다.

보너스 : 이 기술은 원래 예제에 표시된 팔각형 디자인과 같은보다 복잡한 모양을 만들기 위해 확장 될 수 있습니다. 회전, 포지셔닝 및 테두리 스타일을주의 깊게 조정함으로써 다양한 창의적인 국경 텍스트 디자인이 가능합니다.

위 내용은 기본 HTML 요소를 사용하여 테두리로 텍스트를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!