Codecademy Codeyear Explanation: Browsers and CSS3

div {background-color: grey; border: #DDD; padding: 10px; margin:10px;}

.roundedCorners {
    border-radius: 15px;
}
.shadowBox {
    box-shadow: 8px 8px 6px -2px black;
}
.shadowText{
    text-shadow: 3px 3px 3px yellow;
}
.columns {
    -webkit-column-count: 3;
}
.rotate {
    -webkit-transform: rotate(25deg);
}
.gradient {
    background:    -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */
    background:      -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */
    background:     -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */
    background:         linear-gradient(top, blue 0%, white 100%); /* the standard way */
}



It is likely that your browser has partial support of some of the ones that appear broken--to get it to work you put your vendor-prefix in front of the property.

Firefox: -moz-
Chrome: -webkit-
Safari: -webkit-
Opera: -o-
Internet Explorer: -ms-

For example, if you're using Chrome, you can make the columns example work by changing it's property to this:

-webkit-column-count:3;

Sometimes the vendors have non-standard syntax, as is the case with gradients, so we put that in there for you.