Code-only use CSS3 rounded border and box shadow to create iphone Effects

Code-only use CSS3 rounded border and box shadow to create iphone Effects
Css3 brings us a lot of visual feelings and changes. A lot of code can be implemented for the previous operations on images. The following is a brief introduction of the two most common corner borders and box shadows. We also attach an iphone effect to provide you with exercises. 1. border-radius rounded rectangle syntax format: border-radius: horizontal radius/vertical radius, but we usually omit this vertical radius. There is also a method for writing the rounded corner. border-radius: the lower-right corner of the upper-left corner is in the lower-right corner. The clockwise mode is used, as shown in the following code:

1 <! DOCTYPE html> 2 
 
1.2 box-shadow (Box-shadow) box-shadow: horizontal shadow vertical shadow blur distance shadow size shadow color inside and outside shadows; only horizontal and vertical shadows are required. Other values can be omitted with default values. By default, the external shadow outset cannot be written. If you write it, you will not be able to see the effect. For details, refer to the following code:
<! DOCTYPE html>