Now html5 css3 has become more and more popular. It is not difficult to implement p gradient with CSS3. This article has sorted out three commonly used color gradient modes, including linear gradient, radial gradient and repeated linear. Gradient is introduced in detail through sample code in this article. Friends in need can refer to it. Let’s take a look together.
1. Linear gradient: linear-gradient
## Syntax:
= linear-gradient([ [ | to [, ]+)
= [left | right] || [top | bottom]
= [ |]?
The following values are used to represent the direction of the gradient, which can be set using angles or keywords:
0c0cb308ee3d2ee3281772bfc9b806c2: Use angle values to specify the direction (or angle) of the gradient. .
to left: Set the gradient from right to left. Equivalent to: 270deg
to right: Set the gradient from left to right. Equivalent to: 90deg
to top: Set the gradient from bottom to top. Equivalent to: 0deg
to bottom: Set the gradient from top to bottom. Equivalent to: 180deg. This is the default value, which is equivalent to leaving it blank.
# & LT; LENGTH & GT ;: Specify the start and end color position with length value. The negative value is not allowed
# & lt; percentage & gt;
Example:
##
p {
width: 200px;
height: 100px;
margin: 10px 5px;
border: 1px solid #ddd000;
}
#LinearStartToEnd {
float:left;
background: linear-gradient(#ff0000, #00ff00);
}
#LinearPercentage {
float:left;
background: linear-gradient(#0000ff, #ff0000 52%, #00ff00);
}
#LinearAnglePercentage {
float:left;
background: linear-gradient(90deg, #ff0000 20%, #00ff00 50%, #000000 80%);
}
#LinearAngle {
float:left;
background: linear-gradient(30deg, #ffff00 30%, #ff0000, #00ff00);
}
#LinearTopRight {
float:left;
background: linear-gradient(to right top, #00ff00, #ff0000 50%, #0000ff);
}
2. Radial gradient: radial-gradient
Syntax:
= [ ① | ① | left | center① | right ]? [ ② | ② | top | center② | bottom ]?
= circle | ellipse
= |[||]
= closest-side | closest-corner | farthest-side | farthest-corner
=
= [ | ]{2}
= |
= radial-gradient([ [ || ] [ at ]? , | at , ]?[[ , ]]+)
Location. If two parameters are provided, the first represents the abscissa and the second represents the ordinate; if only one is provided, the second value defaults to 50%, that is, center
Use the length value to specify the abscissa value of the center of the radial gradient circle. Can be negative.
# & LT; Percentage & GT; ①: Specify the horizontal coordinate value of the radial gradient center with a percentage. Can be negative.
Can be negative.
# & LT; Percentage & GT; ②: Specify the vertical coordinate value of the radial gradient center with percentage. Can be negative.
# ： ①: Set the middle coordinate value of radial gradient heart.
# ② ②: Set the medium marking value of the radial gradient heart.
# LEFT: Set the horizontal coordinate value of the radial gradient center.
Right: Set the horizontal coordinate value of the radial gradient center.
Top: The top of the top is the longitudinal coordinate value of the radial gradient.
## Bottom: Set the bottom of the radial gradient heart.
## & LT; Shape & GT; Determine the type of circular
Circle: Specify the round radial gradient
# Ellipse: Specify the oval shape Radial gradient.
# & LT; Extens-Keyword & GT; Circle | Ellipse accepts this value as size.
closest-side: Specify the radius length of the radial gradient from the center of the circle to the side closest to the center of the circle.
closest-corner: Specify the radius length of the radial gradient from the center of the circle to the angle closest to the center of the circle.
but farthest-side: specifies the radius length of the radial gradient from the center of the circle to the side farthest from the center of the circle.
completely, FARTHEST-CORNER: Specify the radius length of the radial gradient is the farthest angle from the center of the circle to the farthest.
4864699555de5951925219d21d827f01 circle 接受该值作为 size。
d82af2074b26fcfe177e947839b5d381：用长度值指定正圆径向渐变的半径长度。不允许负值。
27f0c97386351520c498b3508674e061 ellipse 接受该值作为 size。
d82af2074b26fcfe177e947839b5d381：用长度值指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
42c97a047d75abc12b9b351eb8562711：用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。
示例：
#RadialCenterCircle {
float:left;
background: radial-gradient(circle at center, #ff0000, #ffff00, #00ffff);
}
#RadialClosestSide {
float:left;
background: radial-gradient(circle closest-side, #ff0000, #00ff00, #ffff00);
}
#RadialFarthestSide {
float:left;
background: radial-gradient(farthest-side, #ff0000 20%, #ffff00 60%, #00ff00 80%);
}
#RadialRightTop {
float:left;
background: radial-gradient(at right top, #ff0000, #ffff00, #00ff00);
}
#RadialRadiusCenter {
float:left;
background: radial-gradient(farthest-side at top right, #ff0000, #ffff00, #01fefe);
}
#RadialGroup {
float:left;
background:
radial-gradient(farthest-side at top right, #ff0000, #ffff00, #009f00, transparent),
radial-gradient(60px at top left, #ff0000, #ffff00, #00ff0e);
}
三、重复的线性渐变：repeating-linear-gradient
语法和参数类似线性渐变，这里不在赘述。详情请参考CSS手册。
示例：
#RepeatingLinearPercentage{
float:left;
background: repeating-linear-gradient(#ff0000, #00ff00 10%, #000000 15%);
}
#RepeatingLinearRight {
float:left;
background: repeating-linear-gradient(to right, #ff0000, #00ff00 10%, #000000 15%);
}
#RepeatingLinearAngle {
float:left;
background: repeating-linear-gradient(45deg, #ff0000, #00ff00 10%, #0000ff 15%);
}
#RepeatingLinearBottomLeft {
float:left;
background: repeating-linear-gradient(to bottom left, #00ffff, #ff0000 10%, #00ff00 15%);
}
四、重复的径向渐变：repeating-radial-gradient
语法和参数类似径向渐变，这里不在赘述。详情请参考CSS手册。
示例：
#RepeatingRadialCircle {
float:left;
background: repeating-radial-gradient(circle, #ff0000 0, #00ff00 10%, #0000ff 15%);
}
#RepeatingRadialTopLeft {
float:left;
background: repeating-radial-gradient(at top left, #ff0000, #00ff00 10%, #0de0f0 15%, #ffff00 20%, #000000 25%);
}
#RepeatingRadialClosestCorner {
float:left;
background: repeating-radial-gradient(circle closest-corner at 20px 50px, #00ff00, #ff0000 10%, #00ffff 20%, #ffff00 30%, #ff00ff 40%);
}
完整的例子：
ImageCSS3
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
如何用CSS实现带阴影效果的黑色导航菜单效果
两种方法用CSS实现背景图尺寸不随浏览器缩放而变化的代码
The above is the detailed content of Several color gradient modes commonly used in CSS3. For more information, please follow other related articles on the PHP Chinese website!
