Learn the front-end development from scratch-16, CSS3 fillet and Shadow

First, CSS3 fillet: Border-radius: value + unit;

1. Set a value: border-radius:20px; Four direction fillets are 20px (horizontal radius and vertical radius equal)

2. Set two values

border-radius:50px 5px; Top left, bottom right 50px, top right, 5px bottom left

3. Set three values

border-radius:10px 50px 20px; Top left is 10px, top right, bottom left is 50px, right down 20px

4. Set four values

border-radius:0px 10px 30px 50px;

Clockwise direction is left top 0, top right 10, lower right 30, bottom left 50

5. Use/To set the second set of values

border-radius:50px/10px;

The first set of values represents a horizontal radius of 50px, and the second set of values represents a vertical radius of 10px

6. You can also set the fillet in one Direction individually

Border-top-left-radius Upper left corner

Border-top-right-radius Upper right corner

Border-bottom-right-radius Lower right corner

Border-bottom-left-radius Lower left corner

7. Set to Circle

border-radius:50%; (or border-radius:100%;)

Second, picture border

1. Set the path of the image border

Border-image-source:url (picture path);

2. Set the clipping position of the image border

Border-image-slice: Numerical value;

Note: The default middle section is not displayed, and if necessary, add fill

Eg:border-image-slice:27 fill; (Set values, specifically pixels)

3. Set tile properties for image borders

Border-image-repeat:stretch|repeat|round;

Stretch default value, image is stretched

Repeat picture tiled, truncated when hit boundary

Round picture tile, touch the border will dynamically adjust the size of the picture, until the entire container is covered

Eg:border-image-repeat:round Stretch;

The horizontal direction is full and the vertical direction is stretched.

Three, text shadow: text-shadow:x axis offset y-axis offset ambiguity color value;

eg:text-shadow:3px 3px 5px black,5px 5px 8px gray,10px 10px 8px red;

Note: The X-axis offset is positive to the right and negative to the left

Y-axis offset downward positive, negative up

The default value of fuzziness is 0, the higher the value, the greater the fuzziness, and the setting of negative values is not allowed.

Four, Box shadow : box-shadow:x axis offset y-axis offset blur extension radius color value;

eg:box-shadow:5px 5px 3px gray,8px 8px 3px #333;

eg:box-shadow:5px 5px 3px Black inset;

Note: Box shadow is divided into inner shadow and outer shadow, default is outer shadow, when setting inset, it is inner shadow

eg:box-shadow:0 0 5px 10px Gray;

Note: The extended radius can be positive or negative

Extended:

Set the triangle with the right direction:

Element
width:0;
height:0;
border:30px solid Transparent;
Border-left-color:blue;
}

set text strokes:-webkit-text-stroke:3px blue;

Learn the front-end development from scratch-16, CSS3 fillet and Shadow