Many new CSS3 properties are available today to create rich layouts, such as creating rounded corners, gradients and shadows, and adjusting transparency.

1. Create rounded corners for the element

Using CSS3, you can create rounded corners for most elements, including form elements, images, and even paragraph text, without introducing additional markup or images. Use the border-RADIUS attribute to create rounded corners for elements.

-1. Create four same rounded corners: border-radius: r; Here r is the radius of the fillet, which is the length in units.

 corners{
	border-radius : 20px;
 }
Copy the code

-2. Create a rounded corner for the element

  • Create the top right rounded corner: border-top-right-radius:r

  • Top left rounded: border-top-left-radius:r

  • Bottom right rounded corner: border-bottom-right-radius:r

  • Top left rounded: border-bottom-left-radius:r

    corners{
        border-bottom-left-radius : 75px;
 }
Copy the code

-3. Create a rounded oval border-radius: x/y where x is the horizontal radius of the rounded corner and y is the vertical radius.

corners{
        border-radius: 50px / 20px;
}
Copy the code

-4. Use the border-radius command to create a circle: border-radius: r Where r is the radius of an element.

corners{
          border-radius : 50%;
       }
Copy the code

Add a shadow to the text

Add a shadow to the element’s text: text-shadow attributes: Enter the X-offset, Y-offset, blur radius, and color values, respectively.

Example: -2xp 3xp 7xp #999. If blur-radius is not specified, it is assumed to default to 0.

Text-shadow: none Return to the default value.

.basic{ text-shadow : 3px 3px #aaa; } .negative{ text-shadow : -4px -2px #ccc; } .blur{ text-shadow : 2px 2px 10px grey; } .inversed{ color:white; text-shadow : 2px 2px 10px #000; }. Multiple {text-shadow: 2px 2px white, 6px,6px,rgba (50,50,50,.25); }Copy the code

3. Add shadows to other elements

The box-shadow attribute allows you to add a shadow to the element itself, which is the same as the text-shadow attribute, but box-shadow also allows you to expand or shrink the shadow using two optional attributes, the Inset keyword attribute and the spread attribute.

The box-shadow attribute takes six values: x-offset and y-offset with units of length, the optional blur-radius with units of length, and the optional inset keyword. Optional spread and color values with length units. If blur-radius and spread are not specified, they default to 0.

-1. Add a shadow to the element. Box-shadow: Enter the values of X-offset, Y-offset, blur-radius, spread, and color.

-2. Create an inner shadow. Box-shadow: Enter the values of X-offset, Y-offset, blur-radius, spread, and color. Enter inset after the colon.

-3. Apply multiple shadows to the elements: Enter the x-offset, Y-offset, blur- RADIUS, spread, color values, and repeat the preceding steps with a comma.

.basic{ box-shadow : 3px 3px 5px #aaa; } .negative{ box-shadow : -4px -4px 5px #ccc; } .blur{ box-shadow : 4px 4px 5px 3px grey; } .inversed{ box-shadow : 0 0 9px 3px #999; } .multiple{ box-shadow : 2px 2px 10px #666 inset; /* create inner shadow */}. Multiples {box-shadow: 2px 2px 10px rgba(255,0,0.75), 5px 5px 20px blue; }Copy the code

4. Use multiple backgrounds

Specifying multiple backgrounds for a single HTML element is a feature introduced in CSS3 that simplifies HTML code and makes it easy to understand and maintain. Multiple backgrounds can be applied to almost any element.

  • (1) Apply multiple background images to a single element: background-color: b, where b is the alternate background color you want to apply to the element.

  • ② Enter background-image: u, where u is a list of absolute or relative path urls referenced by the image.

  • (3) Enter background-position: p, where p is the set of paired X-offset and y-offset.

  • ④ Enter background-repeat: r, where r is the value of repeat-x,repeat-y, or no-repeat.

    .night-sky{ background-color: navy; /* background-image: url(xxx. PNG),url(zzz.png), URL (iiI.png),url(eee.png); background-position: 50% 102%,100% -150px, 0 -150px,50% 100%; background-repeat: no-repeat,no-repeat, no-repeat,repeat-x; height: 300px; margin: 0 auto; padding-top: 36px; width: 75%; }Copy the code

Use a gradient background

By blending the background, you can create transitions from one color to another without using an image.

Create alternate background-color:color.

1) Define a linear gradient: Enter background:linear-gradient (skip this step if you want the gradient direction to be from the top down (default). Put a comma after the input direction, which is to top, to right, to left, to bottom right, to bottom left, to top right, or to top left. Or put a comma after the input direction, where direction refers to the Angle value (45deg, 107deg, 180deg, or 310deg). Then define the color of the gradient as described in “Specify a Color or Specify a Color and where the color stops.”

1) Enter background:radial gradient(specify the size of the gradient). Enter the size. Here size can be a length value for both the width and height (200px or 7em), or a pair of width and height values (60% 85% or 390px 175px). If only one value is used, it cannot be a percentage.

Or you can type in size, where size is closest side, spidery side, spidery corner or spidery corner. These keywords represent how far the gradient can stretch relative to the center of the gradient.

3) Specify the location of the gradient

Skip this step if you want the gradient to start at the center (default). Enter pos, where POS is at top, at right, at left, at bottom right, at bottom left, at top right, or at top left for the center of the gradient.

Or enter pos, where pos is a pair of coordinates representing the center of the gradient and starting with at. For example, at 200px 43px, at 33% 70%, at 50%-10px.

4) Specify the color

Enter at least two colors, each separated by a comma. Specifies where the first color appears at the beginning of the gradient and the last color at the end of the gradient.

5) Specify the color and where the color stops: Specify a percentage of each color you want to control where the color appears in the gradient. This number can be negative or greater than 100%.

Take a look at some code examples:

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	body{
		width: 400px;
		height: 600px;
	}
	.vertical-dowb{
		width: 200px;
		height: 200px;
		background : silver;
		background : linear-gradient ( to right,silver,black);
	}
	.vertical-up{
		width: 200px;
		height: 200px;
		background : aqua;
		background : linear-gradient ( 120deg,aqua,navy);
	}
	.vertical-rt{
		width: 200px;
		height: 200px;
		background : red;
		background : radial-gradient (at top,yellow,red);
	}
	.vertical-tl{
		width: 200px;
		height: 200px;
		background : red;
		background : radial-gradient (closest-side at 70px 60px,yellow,lime,red);
	}
</style>
 </head>
 <body>
         <div class="vertical-dowb"><p>like </p></div>
         <div class="vertical-up"><p>like</p></div>
         <div class="vertical-rt"><p>like</p></div>
         <div class="vertical-tl"><p>like</p></div>
 </body>
 </html>
Copy the code

6. Set the opacity of the element

Using the opacity property, you can modify the opacity of an element (including an image). Opacity: O, where O indicates the opacity of an element (two decimal digits without units).

  .box{
	background: #000;
	opacity: .5;
	}
Copy the code

7. Generate content effects

Using the: before and After pseudo-elements makes it easy to add some incredible effects to a page. They can be used in combination with the Content attribute to generate what’s called generated content, which is content created with CSS rather than generated by HTML. Let’s look at the simplest example:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .more:after{ content: <p> <a href="xxx.html" class="more"> Read more </a> </a> </p> </body> </html>Copy the code