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.