Border-radius attributes
For CSS3 rounded corners, you only need to set one attribute: border-radius (meaning "border radius "). If you provide a value for this attribute, you can set the radius of the four rounded corners at the same time. All valid CSS measurement values can be em, ex, pt, px, percentage, and so on.
For example, the following is a div box:
Now set its rounded corner radius to 15px:
Border-radius: 15px;
This statement sets the "horizontal radius" and "vertical radius" of each rounded corner to 15px at the same time.
Border-radius can be set to 1 to 4 values at the same time. If one value is set, this value is used for all four rounded corners. If two values are set, the first value is used in the upper left and lower right corner, and the second value is used in the upper right and lower left corner. If three values are set, the first value is used in the upper left corner, the second value is used in the upper right corner and the lower left corner, and the third value is used in the lower right corner. If four values are set, they correspond to the upper left corner, the upper right corner, the lower right corner, and the lower left corner (clockwise ).
Border-radius: 15px 5px;
Border-radius: 15px 5px 25px;
Border-radius: 15px 5px 25px 0px;
(If the radius in the lower left corner is 0, it becomes a right angle .)
Border-radius can also use a slash to set the second set of values. The first group indicates the horizontal radius, and the second group indicates the vertical radius. You can set 1 to 4 values for the second group. The application rules are the same as those for the first group.
Border-radius: 15px 5px/3px;
Border-radius: 15px 5px 25px/3px 5px;
Border-radius: 15px 5px 25px 5px/3px 5px 10px 15px;
Rounded corner and shadow
| The code is as follows: |
Copy code |
# Main. content {
Width: 1024px;
Margin: 0 auto;
Overflow: hidden;
Background-color: # fff;
-Webkit-box-shadow: 0 2px 3px rgba (34, 25, 25, 0.4); // shadow implementation
-Moz-box-shadow: 0 2px 3px rgba (34, 25, 25, 0.4); // shadow implementation
Box-shadow: 0 2px 3px rgba (34, 25, 25, 0.4); // shadow implementation
-Moz-border-radius: 10px; // rounded corner
-Webkit-border-radius: 10px; // corner implementation
Border-radius: 10px; // rounded corner implementation
Behavior: url (./PIE. htc );
} |
