CSS에서 테두리를 투명하게 만드는 방법

CSS에서 테두리를 투명하게 만드는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 div를 만듭니다. 마지막으로 div에 "border-top:10px solid rgba(200,200,200,0.25)" 스타일을 설정합니다. 지정된 테두리를 투명하게 만듭니다.

이 기사의 운영 환경: windows7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

투명도는 일반적으로 색상 속성으로 간주되지만 그러한 값은 없습니다. 우리는 div를 투명하게 만드는 가장 좋은 방법을 찾았습니다. RGBA

RGBA를 사용하면 RGB를 기반으로 알파 투명도를 제어하는 ​​매개변수가 추가됩니다. R(빨간색), G(녹색), B(파란색)의 세 가지 매개변수가 있습니다. 양의 정수 값 범위는 0 – 255 또는 백분율 값 범위는 0.0% – 100.0%입니다. 범위를 벗어난 값은 가장 가까운 값 제한으로 반올림됩니다. 모든 브라우저가 백분율 값 사용을 지원하는 것은 아닙니다. 매개변수 값은 0에서 1 사이이며 음수가 될 수 없습니다.

RGBA 구문 예:

.div {background: rgba(200,200,200,0.5);}

다음으로 테두리를 투명하게 만드는 방법을 보여줍니다.

div에 다음 스타일을 설정합니다.

div {    width: 100px;    
height:100px;    border-top:10px solid  rgba(200,200,200,0.25);    border-right:10px solid  rgba(200,200,200,0.5);    border-bottom: 10px solid  rgba(200,200,200,0.75);    border-left:10px solid  rgba(200,200,200,1);}

표시 효과는 다음과 같습니다. 그림 디스플레이에 표시된 것처럼 각 측면의 투명도가 다릅니다. 테두리의 투명도를 설정해야 하는 경우 필요에 따라 0-1 사이의 마지막 값을 입력하면 됩니다.

동영상 공유 학습: css 동영상 튜토리얼

위 내용은 CSS에서 테두리를 투명하게 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!