简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  CSS3에서 테두리 색상 그라데이션을 설정하는 방법은 무엇입니까? CSS3 테두리 색상 그라데이션의 두 가지 구현 방법

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

不言
不言원래의
2018-09-12 14:24:3490892검색

웹 페이지를 개발할 때 어떤 이유로 테두리 색상 그라데이션을 설정해야 하는 경우가 많습니다. 그렇다면 색상 테두리 그라데이션을 설정하는 방법은 무엇일까요? 이 기사에서는 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 테두리 색상 그라데이션의 두 가지 구현 방법관련 권장 사항:

내부 그림자를 포함하여 CSS3에서 box-shadow 속성을 사용하는 방법 공유 box-shadow: inset

#🎜 🎜# css 색상 그라데이션 예: CSS3 텍스트 색상 그라데이션 구현 방법

위 내용은 CSS3에서 테두리 색상 그라데이션을 설정하는 방법은 무엇입니까? CSS3 테두리 색상 그라데이션의 두 가지 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3에서 전환 애니메이션 효과를 얻는 방법은 무엇입니까? CSS3 전환 효과를 구현하는 방법다음 기사：CSS3에서 전환 애니메이션 효과를 얻는 방법은 무엇입니까? CSS3 전환 효과를 구현하는 방법

관련 기사

더보기