CSS rounded border box shadow text shadow

Table of contents

1. Rounded border (emphasis)

The border-radius property is used to set the rounded corners of the outer border of the element.

grammar:

border-radius: length;

The principle of radius radius (the radius of the circle): the intersection of the (ellipse) circle and the frame forms a rounded corner effect.

!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 {
            width: 300px;
            height: 150px;
            background-color: pink;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div>
        <div class="header">
            C罗
        </div>
    </div>
</body>

Use: Syntax: border-radius: length;

Parameter values can be in the form of numbers or percentages.
If it is a square, you want to set a circle, the value is the general height or width, and the percentage is 50%.
If a rectangle, set to normal for height.
This attribute is a shorthand attribute that can be followed by four values, representing the upper left corner, upper right corner, lower left corner, and lower right corner.
分开写： border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-bottom-radius。

2. Box shadow (box-shadow)

Add box shadow box-shadow in css3

语法： box-shadow：h-shadow v-shadow blur spread color inset；

value	describe
h-shadow	Required, negative values are allowed for the position of the horizontal shadow
v-shadow	Required, negative values are allowed for the position of the vertical shadow
blur	optional, blur distance
spread	optional, the size of the shadow
color	Optional, the color of the shadow, please refer to the CSS color value
inset	Optional, change outer shadow (outset) to inner shadow

translucent: rgba(0,0,0,.3)

Notice:

The default is the external shadow (outset), but this word cannot be written, otherwise the shadow will be invalid.
Box shadows take up no space and will not affect other box arrangements.

3. Text-shadow

grammar:

text-shadow：h-shadow v-shadow blur color ；

value	describe
h-shadow	Required, negative values are allowed for the position of the horizontal shadow
v-shadow	Required, negative values are allowed for the position of the vertical shadow
blur	optional, blur distance
color	Optional, the color of the shadow, please refer to the CSS color value

CSS rounded border box shadow text shadow

1. Rounded border (emphasis)

2. Box shadow (box-shadow)

3. Text-shadow

Guess you like