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

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

伊谢尔伦

풀어 주다： 2017-07-19 11:06:19

원래의

10799명이 탐색했습니다.

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>

로그인 후 복사

실행 결과