background attribute and shadow knowledge, CSS3 some of the new property!

CSS3 knowledge

background properties

1, background shorthand

  // background: url(img/1.jpg) no-repeat left top; 

 

2, multi-background

  Separated by commas each attribute;

  To avoid background image covered background color is usually defined on the last set;

  {
    background: url(img/1.jpg) no-repeat left top,   
     url(img/2.jpg) no-repeat right bottom pink;
  }

 

3, background-size set the background image size

  Cover : automatically adjust the zoom ratio to ensure pictures are always filling up the background area, if the overflow section will be hidden;

  Contain : will automatically adjust the zoom ratio to ensure pictures are always full display in the background region, the background region may appear blank;

 

4、background-origin

  Box-border : background images placed in a border region as a reference;

  Box-padding : background images placed in a padding region as a reference;

  Box-content : display the background image as a reference to the content area;

 

5、background-clip

  The background color and background rough cut, normally used with the background-origin;

    Box-border : background border extending to the outer edge, but is pressing the border;

    Box-padding : padding extends to the outer edge of the background;

    Box-Content : background is clipped to the content area (content box) outer edge.

 

shadow

  1, text shadow

    Shadow-text : Fuzzy vertical position from the horizontal position of the shadow color;

  2, box shadows

    Shadow-Box : Fuzzy vertical position from the horizontal position of the shadow size of the shadow color shading inside and outside;

            Internal and external shading: The default is outside the shadow, in the shadow want to change, add inset;

      {
        box-shadow:2px 2px 3px 4px rgba( 0, 0, 0, 0.4),   
                     5px 5px 4px rgba( 0, 0, 0,0.4) inset;
      }     

  NOTE: wherein the horizontal and vertical positions are mandatory; multi-layer shadow superimposition still separated by commas.

 

Guess you like

Origin www.cnblogs.com/isremya/p/12640014.html