CSS에서 테두리 선의 너비가 n픽셀인 경우 n개의 다른 색상을 설정할 수 있습니다.
코드에서 너비가 7px인 실선을 정의할 수 있습니다. border: 7px solid #C8C8C8; (여기서 설정된 색상은 신경쓰지 마세요. 후속 코드에서 새로 설정된 색상으로 덮어쓰게 됩니다.
다음 코드와 같이 테두리의 4개 테두리에 그라데이션 색상을 동시에 설정하면
<html> <head> <style> p{ height: 100px; width: 100px; border: 7px solid red; border-color: red green yellow black; } </style> </head> <body> <p></p> </body> </html>
html 파일을 실행한 후 얻는 효과는 다음과 같습니다.
코드미팅 우리가 설정한 색상은 시계방향으로 상, 우, 하, 좌로 자동 지정됩니다. 세 가지 색상만 설정하면 결과는 뻔하며 상, 우, 하 세 방향의 테두리에 바로 할당됩니다. 따라서 이 규칙에 따라 테두리 색상을 설정하지 않는다는 것을 코드에 알리기 위해 각 방향의 테두리에 대한 그라데이션 색상을 별도로 설정해야 합니다. 코드는 다음과 같습니다.
<html> <head> <style> p{ height: 100px; width: 100px; background: #E8F5FC; border: 7px solid red; -moz-border-top-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8; -moz-border-right-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8; -moz-border-bottom-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8; -moz-border-left-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8; } </style> </head> <body> <p></p> </body> </html>
실행 결과
주의할 점은 테두리의 테두리 색상 설정은 외부에서 내부로 이루어지므로 첫 번째 색상 코드가 가장 바깥쪽 색상이고 마지막 색상 코드가 가장 안쪽 색상입니다.
위 내용은 CSS에서 테두리 색상 그라데이션 코드를 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!