[css] 'box-shadow-color'속성이 있습니까?

다음 CSS가 있습니다.

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

이제 페이지 색상을 ‘스킨 가능’하게하기 위해 해당 색상을 추출하려고합니다. 이 작업을 수행하는 방법이 있습니까? 색상을 제거하고 동일한 키를 다시 사용하면 나중에 원래 규칙을 덮어 씁니다.

box-shadow-color적어도 Google은 아무것도 켜지지 않는 것 같습니다 .

답변

아니:

http://www.w3.org/TR/css3-background/#the-box-shadow

계산 된 스타일 목록을 확인하여 Chrome 및 Firefox에서이를 확인할 수 있습니다. 속기 방법 (예 :)이있는 다른 속성 border-radius은 사양에 정의 된 변형이 있습니다.

대부분의 “long-hand”CSS 속성이 누락 된 것처럼 CSS 변수 는이 문제를 해결할 수 있습니다.

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

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

답변

실제로…있다! 일종의. box-shadow기본적으로 color처럼 border.

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

색상은 그림자의 색상입니다. 색상이 없으면 ‘색상’속성에서 사용 된 색상을 가져옵니다.

실제로 color속성 을 변경하고 box-shadow색상을 남기지 않아야합니다.

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

지원하다

사파리 6+
Chrome 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>

스 니펫 확장

아래 주석에 언급 된 버그가 수정되었습니다 🙂

답변

CSS 프리 프로세서를 사용하여 스키닝을 수행 할 수 있습니다. Sass 를 사용하면 이와 비슷한 작업을 수행 할 수 있습니다.

_theme1.scss :

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

_theme2.scss :

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

styles.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

답변

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 */
}

답변

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;

Matt Roberts의 답변은 웹킷 브라우저 (사파리, 크롬 등)에 적합하지만 그림자가있는 프로그램을 배우는 것이 아니라 빠른 답변을 원할 수도 있다고 생각했습니다.

답변

네 방법이 있습니다

box-shadow 0 0 17px 13px rgba(30,140,255,0.80) inset

답변

어쩌면 이것은 새로운 것입니다 (cs3에서도 꽤 엉망입니다). 그러나 당신이 제안한 것을 정확하게 사용하는 페이지가 있습니다.

-moz-box-shadow: 10px 10px 5px #384e69;
-webkit-box-shadow: 10px 10px 5px #384e69;
box-shadow: 10px 10px 5px #384e69;}

.. 그리고 그것은 나를 위해 잘 작동합니다 (적어도 Chrome에서).