border-radius

Border-radius adds a rounded border to the element.

Usage:

border-radius:10px; /* All corners are rounded with a radius of 10px */

border-radius: 5px 4px 3px 2px; /* The four radius values are the top left, top right, bottom right, and bottom left, clockwise */

Do not assume that border-radius values can only be in px units, you can also use percentages or em, but compatibility is not good yet.

Solid upper semicircle:

Method: Set the height to half the width, and only set the radius in the upper left and upper right corners to match the height of the element (greater than is acceptable).

div { height:50px; /* width:100px; background:#9da; border-radius:50px 50px 0 0; /* Set radius to height */}Copy the code

Solid circle: Method: Set width and height to the same value (i.e. square), and set each of the four rounded corners to half their value. The following code:

div { height:100px; /* width:100px; background:#9da; border-radius:50px; /* All four fillets are set to half the width or height */Copy the code

box-shadow

Box-shadow adds a shadow to a box. You can add one or more.

Grammar:

Box-shadow: X-axis offset Y axis offset [shadow blur radius] [shadow extension radius] [shadow color] [shadow mode];Copy the code

Parameter Description:

Note: inset can be written to the first or last parameter, other positions are invalid.

Set the outer shadow for the element:

Sample code:

.box_shadow {
  box-shadow:4px 2px 6px #333333; 
}
Copy the code

Set the inner shadow for the element:

Sample code:

.box_shadow{
  box-shadow:4px 2px 6px #333333 inset; 
}
Copy the code

Add multiple shadows separated by commas:

Sample code:

.box_shadow{
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}
Copy the code

The difference between shadow blur radius and shadow spread radius

Shadow blur radius: This parameter is optional, and its value can only be positive. If its value is 0, it indicates that the shadow has no blur effect. The larger the value is, the more blurred the edge of the shadow is.

Shadow extension radius: This parameter is optional. The value can be positive or negative. If the value is positive, the entire shadow is extended and expanded; if the value is negative, the shadow is shrunk.

The X – and y-offset values can be set to negative values

The X-axis offset is negative:

.boxshadow-outset {
    width:100px;
    height:100px;
    box-shadow:-4px 4px 6px #666;
}
Copy the code

The Y-axis offset is negative:

.boxshadow-outset {
    width:100px;
    height:100px;
    box-shadow:4px -4px 6px #666;
}
Copy the code

border-image

Apply a background image to the border, according to the border-image syntax:

Round can be understood as the fullness of a circle, compressed (or stretched) in order to achieve the fullness.

The meaning of the repeat is to repeat, and then to cut out the part, and to begin to repeat in the center. If it’s exactly divisible, you don’t see the effect.

To stretch means to stretch as long as you can.

Source: MOOCs