CSS3의 Border 속성 사용 코드 예시에 대한 자세한 설명

CSS3에는 Border와 관련된 속성이 세 가지 있습니다: rounded border-radius, picture border border-image, multi-color border border-color 그 중 rounded border-radius는 일반적으로 사용되는 속성이며 현재 많은 웹사이트에서 원을 만듭니다. 모서리 효과는 모두 경계 반경을 사용하여 구현됩니다.

 /*我们可以分别给各边上色*/
  border-top-color: <color>/*给上边框上色*/
  border-right-color: <color> /*给右边框上色*/
  border-bottom-color:<color> /*给下边框上色*/
  border-left-color: <color> /*给左框上色*/

위는 요소의 테두리에 색상을 지정하는 방법을 보여줍니다. 이렇게 하면 테두리에 고유한 색상을 부여할 수 있다는 것은 누구나 알고 있습니다. 그러나 예를 들어 테두리에 그라데이션 색상을 추가하거나 색상을 추가하는 등 테두리에 다른 색상을 추가하려는 경우 이전 방법은 아무 것도 할 수 없습니다. 그렇다면 CSS3에서 이러한 효과를 얻으려면 어떻게 해야 합니까? 자체적인 border-color 속성을 사용하는 다른 방법을 도입했지만 지금까지는 Firefox 3.0+ 브라우저에서만 이 속성을 지원합니다. CSS3의 테두리 색상을 적용하는 경우가 매우 드물기 때문이기도 합니다. 제가 아는 한 CSS3의 테두리 색상을 사용하여 특별한 테두리 효과를 구현하는 프로젝트는 없습니다. 그러나 이것이 CSS3의 다양한 속성을 배우려는 우리 CSS3 애호가들의 열정에는 영향을 미치지 않습니다. 계속해서 CSS3의 borderder-color가 어떻게 사용되는지 살펴보겠습니다.

문법 작성 규칙을 살펴보겠습니다

-moz-border-top-colors: <color> <color> <color>*; /*顶边边框*/
  -moz-border-right-colors:<color> <color> <color>*; /*右边边框*/
  -moz-border-bottom-colors: <color> <color> <color>*; /*底边边框*/
  -moz-border-left-colors: <color> <color> <color>*; /*左边边框*/

위 문법 규칙 중 요소의 네 면을 별도로 작성하지만 CSS3에서는 border-top-color를 사용합니다. , border-right-colors, border-bottom-colors, border-left-colors, 여기서 색상은 복수이지만 CSS2에서는 모두 border-top-color, border-right-color, border-bottom-color, 테두리 왼쪽 색상. 모두가 이것을 기억해야 합니다. CSS3에서는 "색상"입니다

CSS3의 테두리 색상 속성을 사용할 때 테두리 너비가 X px로 설정되어 있으면 테두리에 X 색상을 사용할 수 있습니다. 이 각 색상은 px입니다. . 테두리 너비가 10px로 설정되어 있고 3~4개의 색상만 사용하는 경우 마지막 색상이 그 뒤의 너비를 채웁니다.

.demo {   
    width: 200px;
   height: 100px;
   border: 5px solid transparent;
   -moz-border-top-colors: red blue white white black;
   -moz-border-right-colors: red blue white white black;
   -moz-border-bottom-colors: red blue white white black;
   -moz-border-left-colors: red blue white white black;       
 }

이 속성을 사용하여 그라데이션 테두리 효과를 만들 수도 있습니다

.demo1 {    
      width: 200px;
    height: 100px;
    border: 10px solid transparent;
    border-radius: 15px 0 15px 0;
    -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
  }

위 내용은 CSS3의 Border 속성 사용 코드 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!