CSS style analysis of image borders on Apple's official website

Most of the images on the official website of Apple US have the following border modification effects. After simple parsing of CSS, it is not difficult to implement it.
The effect is as follows:


 
The CSS source code is as follows:

/* Frames
------------------------*/
# Main. frame {position: relative; margin-bottom: 10px ;}
# Main. frame img {display: block; padding: 7px; border: 1px solid # dedede ;}
# Main. frame: after {content: ""; display: block; height: 12px; position: absolute; z-index: 1; left: 0; bottom:-10px ;}
 
# Main. frame. small: after {width: 373px; back ground: url (http://images.apple.com/supplierresponsibility/images/frame_fold_small.png) no-repeat 0 ;}
# Main. frame. medium: after {width: 509px; back ground: url (http://images.apple.com/supplierresponsibility/images/frame_fold_medium.jpg) no-repeat 0 ;}
# Main. frame. large {margin-bottom: 16px ;}
# Main. frame. large: after {width: 782px; height: 18px; bottom:-16px; background: url (http://images.apple.com/supplierresponsibility/images/frame_fold_large.jpg) no-repeat 0 0 ;}
# Main. frame. large img {padding: 12px ;}
 
Reference the frame class in the content.
In fact, the entire image frame consists of two parts: the above part is a padding around the image, the border 1px solid gray; the bottom is called a shadow (with three sizes ).
Shadow image :(
Http://images.apple.com/supplierresponsibility/images/frame_fold_small.png
)

From Chen zetao's column