This is the 18th day of my participation in the August Challenge

CSS is used to control the style and layout of web pages. CSS3 is the latest CSS standard, and CSS3 is fully backward compatible, that is, CSS3 = CSS2 + CSS3 new attributes. Let’s start with the new CSS3 border properties:

A border

Border – radius rounded corners

Using the border-radius attribute, you can “round” any element, even if the element has no border. The effect is affected by background-clip.

Border-radius property value that defines the radius of the circle or semi-major axis of the ellipse, semi-minor axis:

  • Length:

    , negative values are invalid.
  • Percentage: width of the horizontal half axis relative to the box model; The height of the vertical half axis relative to the box model. Negative values are invalid.

Border-radius is a shorthand attribute that can take 1-4 values:

  • border-radius: 10px, each of the four rounded corners is 10px
  • border-radius: 10px 20px, the first word is upper left/lower right (10px), and the second value is upper right and lower left (20px).
  • border-radius: 10px 15px 20px, the first value is the upper-left corner (10px), the second value is the upper-right and lower-left corner (15px), and the third value is the lower-right corner (20px)
  • border-radius: 10px 15px 20px 25px, the first value is the top left corner (10px), the second value is the top right corner (15px), the third value is the bottom left corner (20px), and the fourth value is the bottom right corner (25px)

#rcorners {
  border-radius: 10px 20px 50%;
  background: url(/images/paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 250px;
  height: 150px;
}
Copy the code

Box – shadow box shadow

You can use box-shadow on almost any element to add a shadow effect. If the element also has the border-radius attribute, the shadow will also have rounded corners. The values you can set for this property include the X-axis offset, Y-axis offset, blur radius, spread radius, and color of the shadow.

/ * x offset | y offset | shadow color * /
box-shadow: 60px -16px teal;

/ * x offset | y offset | | fuzzy shadow radius shadow color * /
box-shadow: 10px 5px 5px black;

/ * x offset | y offset | | | fuzzy shadow radius shadow diffusion radius of the shadow color * /
box-shadow: 2px 2px 2px 1px rgba(0.0.0.0.2);

/ * insert (shadow) inward offset | y | x offset | shadow color * /
box-shadow: inset 5em 1em gold;

/* Any number of shadows separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4 em olive;
Copy the code

Inset (optional), using the inset keyword causes the shadow to fall inside the box, within the border (even if it is transparent), above the background, and below the content.

blockquote {
  padding: 20px;
  box-shadow: inset 0 -3em 3em rgba(0.0.0.0.1), 0 0 0 2px rgb(255.255.255),
    0.3 em 0.3 em 1em rgba(0.0.0.0.3);
}
Copy the code

Border-image Border image

The border-image attribute allows drawing an image on the border of an element, which makes drawing complex look-and-feel components much easier.

border-image: source slice/width/outset repeat|initial|inherit;
Copy the code

Border-image is also a shorthand attribute,

  • border-image-source: none
  • border-image-slice: 100%
  • border-image-width: 1
  • border-image-outset: 0
  • border-image-repeat: stretch

border-image-source

Declare the image resource (image address, gradient function)

border-image-source: url("xx.png");
border-image-source: linear-gradient(red, yellow);
Copy the code

border-image-slice

The border-image-slice attribute is responsible for cutting up the image resource. It divides the image into nine areas: four corners, four edges and the central area. Four slicing lines, set a given distance from their respective sides (based on the size of the incoming image), control the size of the area.

  • Regions 1-4 are corner regions, corresponding to the four corners of the frame graph respectively.
  • Regions 5-8 Edge regions that are repeated in the final border image, scaled or modified to match the dimensions of the elements.
  • Region 9 is the middle region. It is discarded by default, but if the keyword is setfill, it is used as the background image.

border-image-width

Border-image-width specifies the width of the border-image. If the value is greater than the border-width of the element, the border image will be extended to the padding edge.

border-image-outset

The border-image-outset property defines the size of the border image that can exceed the border box.

  • <length>: Sets the distance between the border image and the inside of the border. Default is 0.
  • number: indicates a multiple of the corresponding border-width

border-image-repeat

Border-image-repeat is used to set whether image boundaries should be repeated or stretched, etc

  • stretch: Default value. Stretch the image to fill the area.
  • repeat: A tile (repeated) image to fill an area.
  • round: similar to the repeat value. If it is not possible to tile all images completely, the image is scaled to fit the region.
  • space: similar to the repeat value. If all images cannot be fully tiled, the extension space is distributed around the image

The effect

Use image resources directly

Crop 30px inwards for the border image, stretch the border area (default) and make the border width 30px.

#bitmap {
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
}
Copy the code

Image materials used:

The gradient function generates the image

Generate gradient image and container height and width.

#gradient {
  border: 30px solid;
  border-image: linear-gradient(red, yellow) 10;
  padding: 20px;
}
Copy the code

Brief introduction to the new characteristics of CSS3

  • Border Border
  • Background & Gradient
  • Text Indicates the Text & @font-face
  • Transform element Transform
  • Transition effect
  • Animation Animation
  • Column Multi-column layout
  • Resize & Box-sizing & Outline-offset
  • Images into the order
  • Button in the advanced
  • Multimedia Query