Home > Developer > Web Develop
One, the compatibility of each browser
To be compatible with every major browser, prefix is added, I will list the browser prefix
Prefix browser
-webkit Chrome and Safari
-moz Firefox
-ms IE
-O Opera
Second, the border
1. Rounded angle effect
Border-radius is to add a rounded border to an element
border-radius:10px/* Use rounded corners with a radius of 10px */
border-radius:5px 4px 3px 2px;/* four radius respectively left upper right upper right lower left lower clockwise */
Skills:
(1) Solid upper semicircle:
Method: Set the height to half the width, and only set the upper-left corner and the upper-right corner of the radius and the height of the element is the same (greater than is also possible)
(2) Solid Circle:
Method: Set width and height to uniform (that is, Square), and four fillet values are set to half of their values
2. Shadow effect--box-shadow
Box-shadow: Adds a shadow to the box, supporting one or more.
Grammar:
Box-shadow:x axis offset y-axis offset [shadow blur radius] [shadow expansion radius] [shadow color] [projection mode];
Parameters:
Note: Inset can be written on the first or last of the parameters, and other positions are not valid.
1. The difference between shadow blur radius and shadow expansion radius
Shadow Blur radius: This parameter is optional, its value can only be positive, if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the greater the value of the shadow the more blurred the edge;
Shadow expansion radius: This parameter is optional, its value can be positive negative, if the value is positive, then the entire shadow is extended, the inverse value is negative, then zoom out;
2, X-axis offset and y-axis offset can be set to negative number
3, for the border application picture border-img
Role: Set a background picture for a border
The code involved:
<!doctype html>
CSS3 Learn the frame of the series
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
