Geek asks and answers

Add an extra shadow to the element where the existing shadow is unknown.

I guess the answer to this question is that this is not possible, but I still ask you to hope that someone knows about a smart workaround.

Let's say I have the following class .left-insetthat adds 1px white box-shadow to the left of an element to give it some depth:

.left-inset {
  box-shadow: inset 1px 0 0 rgba(255,255,255,.25);
}

The problem is that if the element that I am adding for this class already has a specific shadow box, this shadow will override the existing one (or this shadow will not be applied depending on the cascade). I want to find a way to safely add this class without conflicts.

I hope there is some future browser support for something like the following:

.left-inset {
  box-shadow: inherit, inherit, inherit, inset 1px 0 0 rgba(255,255,255,.25);
}

, inherit , .

, , , , . .

- , - , ?

+5
4

( , ) :

. ( / ).

.test:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow:3px 3px rgba(275,0,0,.25);
}
+3

:

.left-inset::after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;

    box-shadow: 1px 0 0 rgba(255,255,255,.25);
}

, :: , .

0

- , ( , , ...).

window.getComputedStyle(element).boxShadow

, :

<color> <left> <top> <softness> <spread> - : rgb(102, 102, 102) 5px 5px 5px 0px

:

  • - s = s.split(' ');
  • ,
  • - s = s.join(' ');
  • - elem.style.boxShadow = s;

NOTE . This works in ff and chrome (since the format of the returned string is the same). But I think this is too much to actually try in the production version. Moreover, for styling, you will need to do even more work on a class written in your css.

-1
source

More articles:


All Articles