'상자 그림자-색상' 속성이 있습니까?

'상자 그림자-색상' 속성이 있습니까?

저는 다음과 같은 CSS를 가지고 있습니다.

box-shadow: inset 0px 0px 2px #a00;

이제 페이지 색상을 '가죽을 벗길 수 있는' 색상으로 만들기 위해 해당 색상을 추출하려고 합니다.이것을 할 수 있는 방법이 있습니까?색상을 제거한 후 동일한 키를 다시 사용하면 원래 규칙을 덮어씁니다.

그런 일은 없을 것 같습니다.box-shadow-color적어도 구글은 아무것도 찾지 않습니다.

실제로 있습니다!약간.box-shadow기본값:color,같은border한다.

http://dev.w3.org/ 에 따르면.../#the-box-messages

색은 그림자의 색입니다.색상이 없는 경우 사용된 색상은 'color' 속성에서 가져옵니다.

실제로, 당신은 그것을 바꾸어야 합니다.color재산과 휴가box-shadow색상 없음:

box-shadow: 1px 2px 3px;
color: #a00;

지지하다

• 사파리 6+
• 크롬 20+(최소)
• Firefox 13+(최소)
• IE9+(IE8은 지원하지 않음)box-shadow전혀)

데모

div {
    box-shadow: 0 0 50px;
    transition: 0.3s color;
}
.green {
    color: green;
}
.red {
    color: red;
}
div:hover {
    color: yellow;
}

/*demo style*/
body {
    text-align: center;
}
div {
    display: inline-block;
    background: white;
    height: 100px;
    width: 100px;
    margin: 30px;
    border-radius: 50%;
}

<div class="green"></div>
<div class="red"></div>

아래 댓글에 언급된 버그는 이후 수정되었습니다 :)

아니요:

http://www.w3.org/TR/css3-background/ #더박스(the-box-building)

Chrome 및 Firefox에서 계산된 스타일 목록을 확인하여 이를 확인할 수 있습니다.단축 방법(예: )이 있는 다른 속성에는 규격에 정의된 변형이 있습니다.

대부분의 누락된 CSS 속성과 마찬가지로 CSS 변수는 이 문제를 해결할 수 있습니다.

#el {
    --box-shadow-color: palegoldenrod;
    box-shadow: 1px 2px 3px var(--box-shadow-color);
}

#el:hover {
    --box-shadow-color: goldenrod;
}

CSS 변수로 이 작업을 수행할 수 있습니다.

.box-shadow {
    --box-shadow-color: #000; /* Declaring the variable */
    width: 30px;                
    height: 30px;
    box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */

}

.box-shadow:hover  {
    --box-shadow-color: #ff0000; /* Changing the value of the variable */
}

CSS 프리 프로세서를 사용하여 스킨 작업을 수행할 수 있습니다.Sass를 사용하면 다음과 유사한 작업을 수행할 수 있습니다.

_syslog1.scss:

$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.

_tft2.scss:

$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.

style.scss:

// import whichever theme you want to use
@import 'theme2';

-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;

사이트 전체 주제가 아니라 클래스 기반 주제가 필요한 경우 다음을 수행할 수 있습니다. http://codepen.io/jjenzz/pen/EaAzo

Chrome 및 Firefox에 사용할 수 있는 빠른 복사/붙여넣기는 다음과 같습니다. (# 뒤에 있는 항목을 변경하여 색상을 변경합니다.)

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 15px 5px #666;
-webkit-box-shadow: 0 0 15px 05px #666;

매트 로버츠의 대답은 웹킷 브라우저(사파리, 크롬 등)에 맞는 답이지만, 저는 밖에 있는 누군가가 그림자를 만드는 프로그래밍을 배우라는 말을 듣기보다는 빠른 대답을 원할 수도 있다고 생각했습니다.

언급URL : https://stackoverflow.com/questions/3012899/is-there-a-box-shadow-color-property