Using the image as a background-image, the style browser can be well rendered. I will introduce how to use box-shadow, border-radius and transition to create different image styles (Corner shadow gradient) in css3, box-shadow and border-radius are directly used on the image. The browser cannot render the image properly. However, if the image is used as the background-image, the added style browser can render the image well. I will introduce how to use box-shadow, border-radius, and transition to create different image styles.
Problem
By viewing the demo, we can see that we have set border-radius and Embedded box-shadow for the first line of images. Firefox renders the border-radius of the image, but does not render the Embedded box-shadow. Neither chrome nor Safari is rendered.
The Code is as follows:
. Normal img {
Border: solid 5px #000;
-Webkit-border-radius: 20px;
-Moz-border-radius: 20px;
Border-radius: 20px;
-Webkit-box-shadow: inset 0 1px 5px rgba (0, 0,. 5 );
-Moz-box-shadow: inset 0 1px 5px rgba (0, 0,. 5 );
Box-shadow: inset 0 1px 5px rgba (0, 0,. 5 );
}
Firefox Effect:
Chrome/safari
Work und
To enable border-radius and Embedded box-shadow to work normally, we need to convert the image into a background-image method.
Dynamic Mode
To do this dynamically, we need to use jquery to add a background image packaging for each image. The following js Code adds a span package for each image. The background image path of the span is the image path.
The code is relatively simple and I don't think it is necessary to explain it. You can directly query the jquery api.
The Code is as follows:
