CSS 테두리 효과 사용에 대한 팁 공유

반투명 테두리를 만드는 방법은 무엇입니까? 다중 국경을 구현하는 방법은 무엇입니까? 이 글은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!