다중 색상 테두리 구현 방법, border-color 속성에 대한 자세한 설명-CSS 튜토리얼-php.cn

다중 색상 테두리 구현 방법, border-color 속성에 대한 자세한 설명

云罗郡主

풀어 주다： 2018-10-23 13:47:55

원래의

3868명이 탐색했습니다.

CSS 스타일에서 많은 초보자는 CSS를 사용하여 다중 색상 테두리를 만드는 방법을 모릅니다. 실제로 다중 색상 테두리를 구현하려면 border-color 속성을 사용할 수 있습니까? CSS에서 다중 색상 테두리를 구현하는 방법은 무엇입니까? border-colors 속성을 요약해 보겠습니다.

CSS3에서는 테두리 색상을 사용하여 여러 색상의 테두리를 만들 수 있지만 많은 사람들이 항상 테두리 색상과 테두리 색상을 혼동합니다.

border-colors 구문:

-moz-border-left-colors: border-colors 속성의 색상 값에 주의해야 합니다.

1 border-width가 w픽셀인 경우 테두리는 색상이 될 수 있지만 각 색상이 고유한 너비를 갖는 경우에만 가능합니다.

2. 모든 브라우저에서 테두리 색상을 사용할 수 없으므로 코드 앞에 -moz-를 추가합니다.

3. 네 면의 색상을 동시에 설정할 수는 없지만, 색상을 네 부분으로 나누어 네 면의 색상을 설정할 수 있습니다.

예:

<!DOCTYPE html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-colors属性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border-width:5px;
        border-style:solid;
        -moz-border-top-colors:red orange yellow green cyan blue purple;
        -moz-border-right-colors: red orange yellow green cyan blue purple;
        -moz-border-bottom-colors: red orange yellow green cyan blue purple;
        -moz-border-left-colors: red orange yellow green cyan blue purple;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

로그인 후 복사

특정 코드 효과:

다중 색상 테두리 구현 방법, border-color 속성에 대한 자세한 설명