Чи є властивість "box-shadow-color"?


193

У мене є такі CSS:

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

Зараз я намагаюся витягти цей колір, щоб зробити кольори сторінки «шкіряними». Чи є спосіб це зробити? Просто видаліть колір, а потім знову використовуйте ту саму клавішу, перезаписуючи початкове правило.

Здається, що немає box-shadow-color, принаймні Google нічого не вимикає.


17
Google нічого не повертає через "-" на початку запиту :)
elon

Відповіді:


130

Немає:

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

Ви можете перевірити це в Chrome і Firefox, перевіривши список обчислених стилів. Інші властивості, які мають скорочені методи (наприклад border-radius), мають свої варіанти, визначені у специфікації.

Як і у більшості відсутніх "довгих" властивостей CSS, змінні 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
Cam Jackson

301

Насправді… є! Різновид. box-shadowза замовчуванням color, як borderі у випадку.

Відповідно до http://dev.w3.org/…/#the-box-shadow

Колір - це колір тіні. Якщо колір відсутній, використаний колір береться із властивості 'color'.

На практиці вам доведеться змінити 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>

Помилка, згадана в коментарі нижче, з тих пір виправлена ​​:)


3
У анімації CSS є помилка в Chrome 22 (canary), що спричиняє успадкування анімованого colorвластивості box-shadow . code.google.com/p/chromium/isissue/detail?id=133745
Девід Мердок

14
Хороший хак, якщо в елементі немає тексту.
фенікс

10
Так, інакше вам доведеться обернути його і повторно застосувати colorдо дочірнього елемента.
fregante

3
Я можу підтвердити, що це те саме для IE10.
MaxArt

4
Дякую за розумну та релевантну відповідь. +10 до вас!
кумархарш

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


2

Це можна зробити за допомогою CSS Variable

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

Відповідь Метта Робертса правильна для веб-браузерів (сафарі, хром тощо), але я думав, що хтось там може швидше відповісти, а не сказати, щоб навчитися програмувати робити тіні.



-8

Можливо, це нове (я також досить лайно на css3), але у мене є сторінка, яка використовує саме те, що ви пропонуєте:

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

.. і це чудово працює для мене (принаймні в Chrome).


14
Питання полягало в тому, як змінити лише колір тіні коробки.
Джуліан Д.
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.