Có thuộc tính 'box-Shadow-color' không?

Tôi có CSS ​​sau:

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

Bây giờ tôi đang cố gắng trích xuất màu đó để làm cho màu của trang 'có thể nhìn được'. Có cách nào để làm điều này? Chỉ cần xóa màu, và sau đó sử dụng cùng một khóa một lần nữa sẽ ghi đè lên quy tắc ban đầu.

Dường như không có box-shadow-color, ít nhất Google không có gì.

Không:

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

Bạn có thể xác minh điều này trong Chrome và Firefox bằng cách kiểm tra danh sách các kiểu được tính toán. Các thuộc tính khác có phương thức tốc ký (như border-radius) có các biến thể được xác định trong thông số kỹ thuật.

Như với hầu hết các thuộc tính CSS "dài tay" bị thiếu, các biến CSS có thể giải quyết vấn đề này:

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

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

Thật ra thì có đấy! Sắp xếp box-shadowmặc định color, giống như borderkhông.

Theo http://dev.w3.org/.../#the-box-shadow

Màu sắc là màu của bóng tối. Nếu màu không có, màu đã sử dụng được lấy từ thuộc tính 'màu'.

Trong thực tế, bạn phải thay đổi colortài sản và rời đi box-shadowmà không có màu:

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

Ủng hộ

• Safari 6+
• Chrome 20+ (ít nhất)
• Firefox 13+ (ít nhất)
• IE9 + (IE8 hoàn toàn không hỗ trợ box-shadow)

Bản giới thiệu

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>

Lỗi được đề cập trong bình luận dưới đây đã được sửa :)

Bạn có thể sử dụng bộ xử lý trước CSS để thực hiện giao diện. Với Sass, bạn có thể làm một cái gì đó tương tự như thế này:

_theme1.scss:

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

_theme2.scss:

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

kiểu.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;

Nếu đó không phải là trang web theo chủ đề rộng mà là chủ đề dựa trên lớp mà bạn cần, thì bạn có thể làm điều này: http://codepen.io/jjenzz/pen/EaAzo

Bạn có thể làm điều này với Biến 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 */
}

Nhanh chóng và sao chép / dán bạn có thể sử dụng cho Chrome và Firefox sẽ là: (thay đổi nội dung sau dấu # để thay đổi màu)

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

Câu trả lời của Matt Roberts là chính xác cho các trình duyệt webkit (safari, chrome, v.v.), nhưng tôi nghĩ ai đó ngoài kia có thể muốn có câu trả lời nhanh hơn là được yêu cầu học lập trình để tạo ra một số bóng.

Vâng, đó là một cách

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

Có thể đây là một cái mới (tôi cũng khá tào lao ở css3), nhưng tôi có một trang sử dụng chính xác những gì bạn đề xuất:

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

.. và nó hoạt động tốt với tôi (ít nhất là trong Chrome).