Есть ли свойство 'box-shadow-color'?

194

У меня есть следующий CSS:

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

Сейчас я пытаюсь извлечь этот цвет, чтобы сделать цвета страницы «скиновыми». Есть ли способ сделать это? Просто удалив цвет, а затем снова используя тот же ключ, перезаписываем исходное правило.

Кажется, что нет box-shadow-color, по крайней мере, Google ничего не поднимает.

Epaga
источник
17
Google ничего не возвращает из-за «-» в начале запроса :)
elon

Ответы:

131

Нет:

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

Вы можете проверить это в Chrome и Firefox, проверив список вычисленных стилей. Другие свойства, которые имеют сокращенные методы (например border-radius), имеют свои изменения, определенные в спецификации.

Как и в случае с большинством отсутствующих свойств «длинных рук», переменные CSS могут решить эту проблему:

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

#el:hover {
    --box-shadow-color: goldenrod;
}
Энди Э
источник
6
Это отличное использование переменных! Будем надеяться, что они будут поддерживаться во всех браузерах в течение следующих нескольких лет: /
fregante
1
... если вы не поддерживаете IE до сих пор Cam
Кэм Джексон
301

На самом деле ... есть! Вроде, как бы, что-то вроде. box-shadowпо умолчанию color, так же, как и borderделает.

Согласно http://dev.w3.org/.../#the-box-shadow

Цвет - это цвет тени. Если цвет отсутствует, используемый цвет берется из свойства 'color'.

На практике нужно поменять colorсвойство и оставить box-shadowбез цвета:

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

Служба поддержки

  • Safari 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>

Ошибка, упомянутая в комментарии ниже, была исправлена ​​:)

fregante
источник
3
В Chrome 22 (канарейка) в CSS-анимациях есть ошибка, из-за которой box-shadow не наследует анимированное colorсвойство. code.google.com/p/chromium/issues/detail?id=133745
Дэвид Мердок
14
Хороший хак, если в элементе нет текста.
Феникс
10
Да, в противном случае вам нужно было бы обернуть его и повторно применить colorк дочернему элементу.
fregante
3
Я могу подтвердить, что то же самое для IE10.
MaxArt
4
Спасибо за разумный и актуальный ответ. +10 к тебе!
kumarharsh
4

Вы можете использовать препроцессор 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

jjenzz
источник
2

Вы можете сделать это с помощью переменной 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 */
}
Сандип Кумар
источник
-3

Быстрое копирование и вставка, которые вы можете использовать для 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;

Ответ Мэтта Робертса верен для браузеров webkit (safari, chrome и т. Д.), Но я подумал, что кто-то может захотеть быстрого ответа, а не научиться программировать для создания теней.

Датчанин кальдерон
источник
-5

Да есть способ

box-shadow 0 0 17px 13px rgba(30,140,255,0.80) inset
Иван Елев
источник
-8

Может быть, это новинка (я тоже довольно хреновый на css3), но у меня есть страница, которая использует именно то, что вы предлагаете:

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

.. и у меня это работает нормально (по крайней мере, в Chrome).

Мэтт Робертс
источник
14
Вопрос был в том, как изменить только цвет тени блока.
Джулиан Д.