CSS3 gradient with border styles

“This is the first 13 days of my participation in the First Challenge 2022. For details, see: First Challenge 2022.”

A, the gradient

1-1. Linear gradient

Syntax: background: Linear-gradient (direction, start color, end color)

Or background-image: Linear-gradient
There are two directions: Angle (DEG) and direction (DEG)

The keyword	Corresponding Angle	instructions
to top	0deg	From the bottom up
to bottom	180deg	Top to bottom (default)
to right	90deg	From left to right
to left	270deg	From right to left
to top left	There is no	From the bottom right to the top left
to top right	There is no	From the bottom left to the top right

Multiple color gradients are separated by commas (linear gradients can receive a “list of values”)

For example, background: Linear-gradient (to right, red, orange, yellow, green, blue);

Note: Linear gradient uses background or background-image, not background-color.
When there are multiple colors, the colors can also be followed by a percentage to define where they appear:
- Background: Linear-gradient (to bottom, red, orange 20%, yellow);
- That means orange appears at 20% of the locations
- Note that percentages and colors are separated by Spaces
Code examples:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13-CSS3渐变之线性渐变</title>
<style>
  div {
    width: 100px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border: 1px solid #DADADA;
    border-radius: 5px;
    font-family: "微软雅黑";
    cursor: pointer;
    background: linear-gradient(to bottom, #F8F8F8, #DCDCDC);
  }
  div:hover {
    color: white;
    background: linear-gradient(to bottom, #FFC556, #FFAF19);
  }
</style>
</head>
<body>
	<div>渐变按钮</div>
</body>
</html>
Copy the code

1-2. Radial gradient

A radial gradient refers to a circular gradient of color from the inside out (pulled out from the middle, like a circle). A radial gradient is a circular gradient or an elliptical gradient

Syntax: background: radial-gradient(position, shape size, start-color, stop-color);

Or background-image: radial-gradient(position, shape size, start-color, stop-color);
Position is used to define the center of a circle:

The values	instructions
center	Middle (default)
top	At the top of the
bottom	At the bottom of the
left	left
right	right
top center	Depend on the center of the
top left	Upper left
top right	The upper right
left center	Centered on the left
center center	In the middle of
right center	Centered on the right
bottom left	The lower left
bottom right	The lower right
bottom center	Lower center

Shape size is used to define the size of a shape. It consists of two parts: Shape defines the shape and size defines the size
- Shape values: ellipse (ellipse, default), circle (circle)
- The size values:
  - Closest side specifies the radius of the radial gradient as ranging from the center to the closest side
  - Closest -corner specifies the length of the radial gradient radius as the Angle closest to the center
  - Apel-side specifies that the radius of the radial gradient is from the center of the circle to the farthest edge from the center
  - Apsarp-corner specifies that the radius length of the radial gradient is from the center of the circle to the Angle farthest from the center
Start-color and stop-color are used to define the start and end colors, respectively

Note: Chrome and Firefox only recognize radial gradient properties prefixed with -webkit-
Code examples:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style> div {width: 200px; height: 150px; margin-bottom: 10px; line-height: 150px; text-align: center; color: white; } #div1 { background: -webkit-radial-gradient(center, orange,skyblue); } #div2 { background: -webkit-radial-gradient(top, orange, skyblue); } #div3 { background: -webkit-radial-gradient(ellipse,silver,hotpink); } #div4 { background: -webkit-radial-gradient(circle, silver, hotpink); } #div5 { background: -webkit-radial-gradient(circle closest-side, #23e3fc,#1c499c); } #div6 { background: -webkit-radial-gradient(circle closest-corner, #23e3fc,#1c499c); } #div7 { background: -webkit-radial-gradient(circle farthest-side, #23e3fc,#1c499c); } #div8 { background: -webkit-radial-gradient(circle farthest-corner, #23e3fc,#1c499c); } #div9 { background: -webkit-radial-gradient(red, orange,yellow, green,blue); } #div10 { background: -webkit-radial-gradient(red 5%, orange 30%,yellow 60%); } #div11 { width: 160px; height: 100px; border-radius: 80px/50px; background: -webkit-radial-gradient(top left, yellow, orangered); } </style> </head> <body> <div id="div1">center</div> <div id="div2">top</div> <div id="div3">shape-ellipse</div> <div id="div4">shape-circle</div> <div id="div5">closest-side</div> <div id="div6">closest-corner</div> <div < p style =" margin-top: 14px; margin-top: 14px Id = "div10" > color uneven distribution < / div > < div id = "div11" > < / div > < / body > < / HTML >Copy the code

Second, border style

Common border styles in CSS3 include:

Border-radius rounded corner effect
Box-shadow Indicates the border shadow
Border-image Multi-frame background

2-1, border – the radius

Syntax: border-radius: value.

The value is a length value in units of PX, em, and percentage

2-1-1, border-raduis

The values	The sample	instructions
A value	border-raduis: 10px;	The four corners have a radius of 10px
Two values	border-raduis: 10px 20px;	The top left and bottom right corners have a radius of 10px, and the top right and bottom left corners have a radius of 20px
Three values	border-raduis: 10x 20px 30px;	The top left rounded corner is 10px, the top right rounded corner is 20px, the bottom right rounded corner is 30px, the bottom left rounded corner is not set so look at the corner (top right) so it is 20px
Four values	border-raduis: 10px 20px 30px 40px;	The top left corner, top right corner, bottom right corner and bottom left corner should be 10px 20px 30px 40px

Assign each Angle clockwise from the top left corner, or look at the opposite corner if not assigned

2-1-2, border-raduis implements semicircle and circle:

Round:

Take the upper semicircle: set the height to half the width, and the radius of the upper left and upper right semicircles is defined as the height of the element; The radius of the lower right corner and the lower left corner is defined as 0

Round:

Elements have the same width and height. Set the radius of each corner to half of the element’s width/height (or use 50%).

2-1-3, border-raduis realization ellipse:

Syntax: border-raduis: x/y;

X represents the horizontal radius and y represents the vertical radius

Implement ellipses:

Element width and height are not equal, where the horizontal radius of the four corners is defined as half of the element width, and the vertical radius is positioned as half of the element height

2-1-4. Derived child property of border-raduis

Border-top-left-raduis: indicates the radius of the upper-left corner
Border-top-right-raduis: indicates the radius of the rounded corner in the upper right corner
Border-bottom-right-raduis: indicates the radius of the rounded corner in the lower right corner
Border-bottom-left-raduis: indicates the radius of the rounded corner in the lower left corner

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> #div1 {width: 50px; line-height: 50px; border-radius: 80% 90% 100% 20%; background-color: #E61588; font-size: 30px; text-align: center; color: white; } #div2 { width: 100px; height: 50px; border: 1px solid #E61588; border-radius: 50px 50px 0 0; } #div3 { width: 160px; height: 100px; border: 1px solid #E61588; border-radius: 80px/50px; /* or border-radius: 50%/50%; */ } </style> </head> <body> <div id="div1">6</div> <div id="div2"></div> <div id="div3"></div> </body> </html>Copy the code

2-2, box – shadow

Syntax: box-shadow: x-offset y-offset blur spread color style;

X-offset: horizontal shadow offset
Y-offset: indicates the offset of the vertical shadow
Blur: Defines the blur radius of the shadow. It can only be a positive number
Spread: Defines the shadow size
Color: Defines the color of the shadow
Style: define outer shadow or inner shadow:
- Outset: outside shadow, default value
- Inset: inner shadow

4 direction independent shadows:

Syntax: box-shadow: left shadow, upper shadow, lower shadow, right shadow; (In any order)

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> div {width: 200px; height: 100px; border: 1px solid silver; text-align: center; line-height: 100px; } #div1 { box-shadow: -5px -5px 8px 0px red; } #div4 {box-shadow: 0 0 12px 0px red; } /* Shadow */ #div5 {box-shadow: 0 0 12px red inset; } #div6 {box-shadow: -5px 0 12px red, 0-5px 12px yellow, 0 5px 12px blue, 5px 0 12px green; } </style> <script> window.onload = function() { let oInput = document.getElementsByTagName("input")[0]; let oSpan = document.getElementsByTagName("span")[0]; let oDiv = document.getElementById("div2"); let oDiv2 = document.getElementById("div3"); oInput.onchange = function() { let value = this.value; oSpan.innerText = value; oDiv.style.boxShadow = `5px 5px ${value}px 0px red`; oDiv2.style.boxShadow = `5px 5px 0px ${value}px red`; } } </script> </head> <body> <div id="div1"></div> <input min="0" max="25" value="0" type="range"> <span>0</span> <div Id = "div2" > < / div > < br > < div id = "div3" > < / div > < br > < div id = "div4" > outside the shadow < / div > < br > < div id = "div5" > inner shadow < / div > < br > < div </div> </body> </ HTML >Copy the code

2-3, border – image

Syntax: border-image: image path image cutting width image tiling mode;

The cutting width is shown as top, right, bottom and left (clockwise).
There are three tiling modes: repeat, round and stretch
- Repeat: The picture with four edges is repeated over and over, and the part that is beyond the element is clipped out
- Round: The image with four edges is paved over. In order to be paved over, the border image is compressed or stretched
- “Stretch” : Small blocks with 4 sides will stretch as long as they grow

Derived child attributes:

Border-top-image: indicates the background image of the top border
Border-bottom-image: background image of the bottom border
Border-left-image: indicates the background image of the left border
Border-right-image: indicates the background image in the right border