CSS에서 테두리 색상 그라데이션 코드를 구현하는 방법에 대한 자세한 설명
- 伊谢尔伦원래의
- 2017-07-19 11:06:1910780검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.