CSS에서 테두리 색상 그라데이션 코드를 구현하는 방법에 대한 자세한 설명

伊谢尔伦
풀어 주다: 2017-07-19 11:06:19
원래의
10775명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!