Guide to new features of CSS3

1. New features of CSS3_rounded corners (border-radius)

Using CSS3 border-radius properties, you can make "rounded corners" for any element

border-radius Properties, you can use the following rules:

Four values: the first value is the upper left corner, the second value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.
Three values: the first value is the upper left corner, the second value is the upper right and lower left corners, and the third value is the lower right corner.
Two values: the first value is the upper left corner and the lower right corner, the second value is the upper right corner and the lower left corner
One value: The four fillet values are the same

Notice:

When border-radius:50%;, the square becomes a circle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 20px;
            float: left;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 10px 20px 30px 40px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 10px 20px 40px;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 20px 40px;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 20px;
        }
        /* 当border-radius:50%; 的时候，正方形变成圆 */
        .box5{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
    <div class="box5">box5</div>
</body>
</html>

2. New features of CSS3_Shadow

Shadow classification: box-shadow (box-shadow) and text-shadow (text-shadow)

box shadow

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow:10px 10px 5px 5px red;

inset: used for in-box shadows

value	describe
h-shadow	Required, the position of the horizontal shadow
v-shadow	Required, position of vertical shadow
blur	Optional, fuzzy distance
spread	Optional, the size of the shadow
color	Optional, the color of the shadow
inset	Optional, external references are modified to internal shadows

word shadow

text-shadow: h-shadow v-shadow blur color;

text-shadow:10px 10px 5px green;

value	describe
h-shadow	Required, the position of the horizontal shadow
v-shadow	Required, position of vertical shadow
blur	Optional, fuzzy distance
color	Optional, the color of the shadow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            margin: 0 auto;
            overflow: hidden;
            clear: both;
        }
        div{
            margin: 30px;
            floa

Guide to new features of CSS3

box-shadow:10px 10px 5px 5px red;

text-shadow:10px 10px 5px green;

Guess you like