CSS3에서 테두리 색상 그라데이션을 설정하는 방법은 무엇입니까? CSS3 테두리 색상 그라데이션의 두 가지 구현 방법-CSS 튜토리얼-php.cn

CSS3에서 테두리 색상 그라데이션을 설정하는 방법은 무엇입니까? CSS3 테두리 색상 그라데이션의 두 가지 구현 방법

不言

풀어 주다： 2018-09-12 14:24:34

원래의

91116명이 탐색했습니다.

웹 페이지를 개발할 때 어떤 이유로 테두리 색상 그라데이션을 설정해야 하는 경우가 많습니다. 그렇다면 색상 테두리 그라데이션을 설정하는 방법은 무엇일까요? 이 기사에서는 CSS3를 사용하여 테두리 색상 그라데이션을 설정하는 방법을 소개합니다.

테두리 색상 그라데이션을 설정할 때 사용할 수 있는 CSS3의 속성은 border-image 또는 border-colorcss3 테두리 색상 그라데이션입니다. , 그러면 두 속성이 테두리 색상 그라데이션을 어떻게 설정합니까?

먼저 border-image 속성으로 구현된 간단한 CSS3 테두리 색상 그라데이션의 예를 살펴보겠습니다.

첫 번째 유형: border-image 테두리 색상 설정 그라데이션 예시

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>border</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            border:10px solid #ddd;
            border-image: -webkit-linear-gradient(#F80, #2ED) 20 20;
            border-image: -moz-linear-gradient(#F80, #2ED) 20 20;
            border-image: -o-linear-gradient(#F80, #2ED) 20 20;
            border-image: linear-gradient(#F80, #2ED) 20 20;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

로그인 후 복사

css3 테두리 색상 그라데이션 효과는 다음과 같습니다.

CSS3에서 테두리 색상 그라데이션을 설정하는 방법은 무엇입니까? CSS3 테두리 색상 그라데이션의 두 가지 구현 방법

#🎜 🎜#지침: 위 코드에서 border-image에 선형 그라데이션이 추가된 것을 볼 수 있습니다. 이유는 무엇입니까? 선형 그라데이션을 추가하지 않으면 선형 그라데이션 효과가 없기 때문입니다. (border-image의 용도는 다양하며,

css manual을 참고하세요.)

border-image 속성으로 구현한 테두리 색상 그라데이션의 예를 읽은 후, border-color 속성이 테두리 색상 그라데이션을 구현하는 방법에 대한 예를 살펴보겠습니다.

두 번째 유형: 테두리 색상 설정 테두리 색상 그라데이션 예시

border-color 속성은 동일한 테두리 색상에 대해 여러 설정을 제공합니다. 그러나 지금까지는 Firefox 3.0+ 브라우저에서만 이 속성을 지원합니다. 따라서 사용하거나 테스트할 때 -moz- 접두사를 추가해야 합니다.

사용법을 살펴보겠습니다.

.box{
    border：5px solid transparent;
    -moz-border-top-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-right-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-bottom-colors：<color1> <color2> <color3> <color4> <color5>;
    -moz-border-left-colors：<color1> <color2> <color3> <color4> <color5>;
}

로그인 후 복사

이제 각 테두리에 5가지 색상을 설정했으며 모두 5px의 너비를 차지합니다. 이때 각 색상의 border-width는 1px입니다. 실제로 테두리 너비를 x 픽셀로 설정하고 각 테두리에 y 색상을 설정한 경우 x>y인 경우 첫 번째 y-1 색상은 각각 1px를 차지하고 마지막 색상은 x- y+1 픽셀을 차지합니다.

CSS3 테두리 색상 그라데이션의 예를 살펴보겠습니다. 3차원 그라데이션 효과

.box {
    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에서 테두리 색상 그라데이션을 설정하는 방법은 무엇입니까? CSS3 테두리 색상 그라데이션의 두 가지 구현 방법 관련 권장 사항: