CSS3 Learn the frame of the series

Source: Internet
Author: User

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 */


(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.


Box-shadow:x axis offset y-axis offset [shadow blur radius] [shadow expansion radius] [shadow color] [projection mode];


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.