How to use css to make straight lines with sharp ends
Editor to share with you how to use css to do two pointed straight lines, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
The element can be added to the css with "background:linear-gradient (rgba) 0) 0% Magi RGBA (255Med 255 Letters 1) 50% LGBA (255Med 255Power0) 100%; the style draws a straight line sharpening at both ends.
The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.
In css, you can use the linear gradient linear-gradient () function to make straight lines with sharp ends.
Example:
Body {background-color: red;} .Line {width: 1px; height: 500px; background: linear-gradient (244deg, rgba (255,255,255,0) 0%, rgba (255,255,255,1) 50%, rgba (255,255,255,0) 100%) Margin: 20px;}
Description:
The linear-gradient () function is used to create a picture that represents a linear gradient of two or more colors.
To create a linear gradient, you need to specify two colors, and you can also achieve a gradient in different directions (specified as an angle). If you do not specify a direction, the default gradient is from top to bottom.
Syntax: background: linear-gradient (direction, color-stop1, color-stop2,...)
Value description direction uses the angle value to specify the direction (or angle) of the gradient. Color-stop1, color-stop2,... Lets you specify the start and end color of the gradient.
Example:
/ / Linear gradient specifies an angle: # grad {background-image: linear-gradient (180deg, red, yellow);} / / Linear gradient specifies multiple stop colors: # grad {background-image: linear-gradient (to right, red,orange,yellow,green,blue,indigo,violet);} / Transparency: # grad {background-image: linear-gradient (to right, rgba), rgba } these are all the contents of the article "how to use css to make a straight line at both ends". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
