Css3 practices (2): Box Model and border)

Source: Internet
Author: User
Tags border image

First of all, I would like to thank all the netizens for their support. For the latest CSS standards, refer to the website:.

1. CSS Box Model

First, let's review the Box Model of CSS. The box model is the soul of CSS + Div layout. The following figure shows everything:

The inmost part of the element box is the actual content, and the content is directly surrounded by the padding. The padding shows the background of the element. The edge of the padding is the border. The outer border is the outer margin, and the outer margin is transparent by default, so it does not block any subsequent elements. Box-shadow is added to css3 ).

1.1 box-shadow

The shadow of the box must use images to achieve this effect in css2, and it is not very flexible.

Syntax: Box-Shadow:H-shadow V-shadow blur spread colorInset;

Note:

Value

Description

H-shadow

Required. Shadow offset in the horizontal direction. It can be positive or negative.

V-shadow

Required. Shadow offset in the vertical direction. It can be positive or negative.

Blur

Optional. Fuzzy distance

Spread

Optional. Shadow size

Color

Optional. shadow color. The default value is black.

Inset

Optional. Change the shadow from the external shadow to the internal shadow.

Instance:

. Shadow1 {background-color: #660066; width: 200px; Height: 100px; margin-bottom: 50px; box-Shadow: 50px 50px 20px # 9966ff ;}
 
 

2 css3 borders

In css3, I can define a border (border-radius) and an image border (border-image). In the past, I wanted to achieve these effects using images and related htmlCodeIt is also very complicated. Now we can achieve these effects only by defining the relevant CSS. I'm looking forward to it.

2.1 border-radius

Defining the rounded border in css2 is awkward. We need to define an image for each corner,

Syntax: border-radius:1-4 Length|%/1-4 Length|%;

Extended: border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius

Note:

<Length>: A length value composed of floating point numbers and unit identifiers. It can be a specific value or a percentage, but cannot be a negative value. The first value is the horizontal radius, and the second value is equal to the first value by default. This is the 1/4 rounded corner. The second value is generally used to control the Radian of the rounded corner.

The following is an example:

. Border1 {width: 150px; Height: 80px; Background-color: # 6699ff; Border: 2px solid; border-radius: 20px 5px 20px 5px/10px 5px 10px 5px ;}

Border-radius: The related definition can be equal

Border-top-left-radius: 20px 10px;
Border-top-right-radius: 5px 5px;
Border-bottom-right-radius: 20px 10px;
Border-bottom-left-radius: 5px 5px;

 

Next I will draw a circle for you:

Note: You may have to add a browser prefix for some earlier versions of browser, such as (-WebKit-border-radius: 20px 5px 20px 5px/10px 5px 10px 5px)

2.2 border-Image

It is a pity that ie9 does not support specifying an image as the border of the element.

Syntax: border-image:Source slice width outset repeat;

Note:

Value

Description

Border-image-Source

Border image path

Border-image-slice

Inside the border image

Border-image-Width

Border Image Width

Border-image-outset

The border chart is extending out of the box. Currently, it is not supported by all browsers.

Border-image-repeat

Repeated border image types: tiled (rounded) Stretch (stretched)

Instance:

Below are the images used by my border, which are found on the Internet

Related CSS code:

. Borderimage1 {border-width: 15px; width: 220px; padding: 10px 20px; border-image: URL ('images/border.png ') 30 30 round;-moz-border-image: URL ('images/border.png ') 30 round;/* Firefox */-WebKit-border-image: URL ('images/border.png') 30 round; /* safari and chrome */-o-border-image: URL ('images/border.png ') 30 round;/* opera */}
Border-image-repeat: roundborder-image-repeat: Stretch

 

2.3 border-color

In Firefox, border-color is expanded. If you set the Border width to x px, you can use X colors on this border, the 1px width is displayed for each color. If the width of your border is 10 pixels but only 5 or 6 colors are declared, the last color will be added to the remaining width.

Next, write an instance under Firefox:

. Bordercolor {width: 200px; Height: 60px; Border: 7px solid #000; padding: 3px 3px 3px 6px;-moz-border-bottom-colors: #006 # 33f # 36f # 69f # 9cf # CCF;-moz-border-top-colors: #606 # c0c # f0f # f6f # f9f # FCF; -Moz-border-left-colors: #030 #093 #3c3 #6f6 #9f9 # CFC;-moz-border-right-colors: #630 # C90 # ff0 # ff6 # ff9 # FFC ;}
You can see the border color gradient effect in Firefox

 

At this point, the content of this chapter has been completed, hoping that these new CSS effects will give domestic web designers more inspiration and create better-looking web pages.

In the next chapter, I will explain color and backgroud.

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.