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

Question

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.

score 0 · Accepted Answer · answered Dec 02 '15 at 18:24

0

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

answered Dec 02 '15 at 18:24

cocoa

3,806
7
29
56

Are you referring to the paragraph "Multiple borders and more" in the article you suggested? – Aerendir Dec 02 '15 at 19:22
1

the whole article is good but yes, you can see how they use multiple borders – cocoa Dec 02 '15 at 19:45

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

1 Answers1