HTML and CSS Reference
In-Depth Information
As with the other border properties, border image properties have a shorthand property too and, as mentioned, at
present, most browsers support only the use of the border-image property. Therefore, it's wise to use that prop-
erty in place of the other border image properties.
The shorthand property should take the following syntax:
border-image: border-image-source border-image-slice border-image-width
border-image-outset border-image-repeat
When any of the preceding values are omitted, the properties initial value is used.
1. In styles.css, find the #footer rule set and remove the following declarations:
border-image-source: url(“../images/bdr-footer.png”);
border-image-slice: 4;
border-image-repeat: repeat;
2. Add the shorthand declaration in their place:
-webkit-border-image: url(“../images/bdr-footer.png”) 4 repeat;
3. Save styles.css.
Rather than use three properties here, you use one; specifying the url() , followed by the slice value and then the
repeat value.
As mentioned earlier in this chapter, during the creation of the Cool Shoes & Socks website, I use the -webkit-
vendor prefix because I am using Google Chrome. If you are using a different browser, use the vendor prefix for
that browser.
In Chapter 15, you use a tool that automatically adds the other vendor prefixes to the CSS, saving you from having
to write five different vendor-prefixed properties now.
box-shadow
Initial value: none | Inherited: No | Applies to: All | CSS3
Unprefixed browser support: IE 9+, Firefox 4+, Chrome 10+, Opera 10.5+, Safari 5.1+
Prefixed browser support: Firefox 3,5+, Chrome 1+, Safari 3+
The box-shadow property applies a drop shadow to an element.
You can add a subtle drop shadow (see Figure 5-10) to the main content area:
1. In styles.css, find the #main rule set and add the following below the other declarations:
box-shadow: 0 3px 8px 0 #ccc;
2. Save styles.css.
Search WWH ::




Custom Search