Border radius / Border / box-shadow Advanced

[salll]

Hi,

Where can i find tutorials about advanced borders and box-shadows in css?

I discovered shape of css but cant explanation this:

#egg {
   display:block;
   width: 126px;
   height: 180px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
}

 box-shadow:
    0 0 0 1em red,
    0 1em 0 1em red,
    -2.5em 1.5em 0 .5em red,
    2.5em 1.5em 0 .5em red,
    -3em -3em 0 0 red,
    3em -3em 0 0 red,
    -2em -2em 0 0 red,
    2em -2em 0 0 red,
    -3em -1em 0 0 red,
    -2em -1em 0 0 red,
    2em -1em 0 0 red,
    3em -1em 0 0 red,
    -4em 0 0 0 red,
    -3em 0 0 0 red,
    3em 0 0 0 red,
    4em 0 0 0 red,
    -5em 1em 0 0 red,
    -4em 1em 0 0 red,
    4em 1em 0 0 red,
    5em 1em 0 0 red,
    -5em 2em 0 0 red,
    5em 2em 0 0 red,
    -5em 3em 0 0 red,
    -3em 3em 0 0 red,
    3em 3em 0 0 red,
    5em 3em 0 0 red,
    -2em 4em 0 0 red,
    -1em 4em 0 0 red,
    1em 4em 0 0 red,
    2em 4em 0 0 red;

    background: red;
    width: 1em;
    height: 1em;
    overflow: hidden;

    margin: 50px 0 70px 65px;
  }

link.

How it works o.O

[Shikkediel]

The trick with border-radius is that what comes before the slash defines what happens on the x-axis and after it describes the values for the y-axis. You can use multiple values to pair each corner (like in the example) or in case of using a single value after the slash, it will apply to all defined x-axis values. When the slash is omitted, the values will be used for both x and y.

sitepoint.com/border-radius-with-slash-syntax

w3.org/border-radius

The webkit rule above is using pixels for older operating systems (or browsers) because it doesn’t handle percentages well.

In short for box-shadow, it stacks a whole bunch of them.

[Paulie_D]

http://stackoverflow.com/questions/32126987/border-radius-border-box-shadow-advanced

[Author]

Posts