Search code examples
htmlcsstwitter-bootstrapbox-shadow

CSS box-shadow: can someone explain me the short syntax used in Bootstrap?

The Bootstrap framework uses a short syntax to define a box-shadow for div.form-control:focus:

.form-control {
    border-color: #3c763d;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.form-control:focus {
    border-color: #2b542c;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}

What does the part befor the comma sets? The part after the comma defines the appearance of the shadow, but the part before? Where can I find more info about this?

Searching for this on Google I found a page on w3schools but it seems explain only the part after the comma while I'm don't understanding the part before.

Solution

  • They are using two different box shadows in one statement. The other is an inset border, which is inside instead of outside the element.

    Take a look at this CSS-Tricks article for more info about box shadows