반투명 테두리를 만드는 방법은 무엇입니까? 다중 국경을 구현하는 방법은 무엇입니까? 이 글은 CSS 테두리 효과 구현 기술을 공유하고 있으니 관심 있는 분들은 참고하시기 바랍니다
이 글은 참고용으로 CSS 테두리 효과 구현 기술을 공유하고 있습니다
1. 반투명 테두리 구현
요구사항: 배경이 있는 영역 그림, 정의흰색 p가 있는 영역과 반투명 흰색 테두리 . 이를 구현할 때 가장 먼저 떠오르는 것은 테두리의 투명도를 정의할 수 있다는 것입니다. 코드는 다음과 같습니다.
p{ background:white; border:20px solidhsla(0,0%,100%,.5); }
여기서 hsla는 색상을 정의하는 방법입니다. , 해당 매개변수의 의미는 다음과 같습니다.
H: Hue(색조). 0(또는 360)은 빨간색을 나타내고, 120은 녹색을 나타내고, 240은 파란색을 나타내며, 다른 값을 사용하여 색상을 지정할 수도 있습니다. 값은 0 - 360
S: 채도입니다. 값은 0.0% - 100.0%
L: 가벼움입니다. 값은 0.0% - 100.0%
A: 알파 투명도입니다. 값은 0~1
입니다. 위 스타일 설정을 브라우저에서 실행해 보니 원하는 결과가 나오지 않는 것을 발견했습니다. p는 경계 효과가 없는 순수한 흰색 p입니다.
이 문제가 발생하는 이유는 흰색 p가 반투명 흰색 테두리를 차단하기 때문입니다. p가 흰색으로 설정되면 이 p의 박스 모델 전체 색상이 흰색이 되기 때문입니다. 반투명 흰색 테두리가 설정되어 있으면 이 흰색 p에 배치하면 표시되지 않습니다(p의 흰색 색상으로 설정되면 테두리를 표시할 수 있는 방법이 없습니다).
이 문제를 해결하려면 CSS3의 새로운 속성 - Background-clip을 사용해야 합니다. background-clip은 배경의 그리기 영역을 지정합니다:
border-box 배경이 테두리 상자에 잘립니다.
padding-box 배경이 패딩 상자에 잘립니다
content-box 배경은 컨텐츠 상자에 잘립니다.
기본적으로 background-clip의 값은 border-clip입니다. 이는 정의된 배경이 전체 및 모델에 적용된다는 의미입니다. 위의 예에서 전체 p는 모든 가장자리가 흰색이었습니다. 따라서 background-clip 속성 값을 padding-box로 설정하면 외부 테두리를 색상 없이 채우고 설정된 반투명 테두리를 표시할 수 있습니다.
p{ background:white; border:20pxsolid hsla(0,0%,100%,.5); background-clip:padding-box; }
이렇게 설정된 스타일을 브라우저에서 다시 실행하면 예상했던 흰색 반투명 테두리 효과가 나타납니다.
2. 다중 테두리
때때로 요소의 특수 효과를 위해 요소에 여러 개의 테두리를 추가해야 할 수 있습니다. 다음은 여러 테두리를 추가하는 두 가지 방법입니다. .
1.box-shadow
box-shadow 속성은 박스 모델의 그림자를 설정할 수 있습니다. 하지만 실제로는 테두리를 설정하는 기능도 있습니다.
box-shadow는 5개의 매개변수를 전달할 수 있습니다. 처음 두 매개변수는 투영의 오프셋을 나타내고, 세 번째 매개변수는 투영의 흐림 정도를 나타내며, 네 번째 매개변수는 투영의 확장을 나타내고, 마지막 매개변수는 투영의 색상을 나타냅니다. 그러나 네 번째 매개변수는 거의 사용하지 않습니다. 여기서 네 번째 매개변수를 사용하면 보다 적절한 값을 설정하여 테두리 효과를 시뮬레이션할 수 있습니다.
마찬가지로 box-shadow 속성은 ","로 구분된 여러 그림자 목록을 전달할 수 있습니다. 따라서 섀도우 목록을 정의하고 확장 매개변수의 값을 점진적으로 늘리면 여러 테두리 효과를 그릴 수 있습니다.
2.윤곽선
두 겹의 테두리만 그리려면 외곽선을 사용할 수도 있습니다. 윤곽선은 테두리 외부의 레이어로 테두리 원리와 동일합니다. 윤곽선 스타일을 설정하면 테두리 외부에 또 다른 테두리 레이어를 설정할 수 있습니다.
단, 내부 요소의 테두리 스타일이 변경되어도 개요 속성에 의해 설정된 테두리는 변경되지 않는다는 점에 유의하세요. 즉, 요소 테두리의 모서리가 둥근 경우 윤곽선으로 그린 가장 바깥쪽 테두리는 여전히 직사각형입니다. 이는 외곽선 그리기 테두리의 단점입니다.
위 내용은 이 글의 전체 내용입니다. 읽어주셔서 감사합니다.
위 내용은 CSS 테두리 효과 사용에 대한 팁 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!