다른 색상으로 이중 테두리를 추가하는 방법은 무엇입니까?
CSS를 사용하여 모양에 이중 테두리를 추가하려면 ' :전에 ” 셀렉터가 유명하다. 두 테두리의 색상을 변경하여 고유하게 만듭니다. 다양한 색상의 이중 테두리를 추가하려면 아래에 제공된 단계별 절차를 따르십시오.
1단계: Div 요소 추가 및 클래스 할당
HTML 파일에서
태그 안에 div 요소를 추가하고 ' 수업 '라는 이름으로 이중 경계 '. 사용자는 자신만의 클래스 이름을 만들 수도 있습니다.< 사업부 수업 = '이중 경계' >
< / 사업부 >
2단계: 스타일 태그 만들기
이 단계에서는 ' 클래스에 대한 부분을 만듭니다. 이중 경계 '를 사용하여 하나의 사본으로 만듭니다. :전에 ” 선택기. 이러한 방식으로 CSS 속성이 클래스에 적용됩니다.
< 스타일 >
.더블- 국경 {
}
.더블- 국경 :전에 {
}
< / 스타일 >
3단계: 클래스에 스타일 추가
CSS 속성은 ' 클래스가 있는 div 요소에 적용됩니다. 이중 경계 '. 다음 스타일이 아래에 언급되어 있습니다.
.더블- 국경 {
배경- 색상 : #ccc;
국경 : 4px 솔리드 그린;
패딩: 50px;
너비 : 16px;
키 : 16px;
위치: 상대적;
여유: 0 자동;
}
CSS 속성에 대한 설명은 다음과 같습니다.
- 먼저 “ 배경색 '는 회색이고 ' 국경 ” 4px 무게와 녹색 색상.
- “ 심 ”를 50px로 설정하여 모든 면에서 50px의 내부 공간을 만듭니다.
- 결국 “ 너비 ' 그리고 ' 키' 16px. 또한 “ 여유 ”는 0 auto이며 위쪽 및 아래쪽 여백이 0이고 왼쪽임을 의미합니다.
웹페이지는 다음과 같습니다.
테두리가 'div'에 적용되었음을 출력에 표시합니다.
4단계: CSS 선택기 추가
이제 스타일 태그에서 ' :전에 ” 선택자를 추가하고 아래 코드를 작성합니다.
.더블- 국경 :전에 {배경 : 없음;
국경 : 4px 솔리드 블루;
콘텐츠 : '' ;
위치: 절대;
상단: 4px;
왼쪽: 4px;
오른쪽: 4px;
하단: 4px;
}
속성은 아래에 설명되어 있습니다.
- 사용 ' 위치 ” 속성을 사용하여 요소의 위치를 고정합니다.
- 그 후, “ 위, 왼쪽, 오른쪽 및 아래 ”는 원래 항목에서 새로 생성된 항목의 여백을 정의합니다.
- ':'라는 CSS 선택기 ~ 전에 ”는 선택한 요소 앞에 콘텐츠를 추가합니다.
출력은 다음과 같습니다.
이것이 다른 색상을 사용하여 이중 테두리를 추가할 수 있는 방법입니다.
결론
이중 테두리를 추가하려면 먼저 div 요소를 만들고 클래스에 할당합니다. 그런 다음 CSS '를 추가합니다. 위치 ” 상대 속성으로 설정해야 합니다. 그런 다음 사용자가 선택한 요소 앞에 콘텐츠를 추가할 수 있도록 CSS 선택기 ':before'를 추가합니다. 이 가이드는 다양한 색상의 이중 테두리 사용법을 시연했습니다.