css_径向渐变 radial-gradient()/css generator样式生成器

css 渐变 radial-gradient()

references

​​radial-gradient() - CSS: Cascading Style Sheets | MDN (mozilla.org)​​​​CSS radial-gradient() function (w3schools.com)​​​​resolution - CSS: Cascading Style Sheets | MDN (mozilla.org)​​​​radial-gradient · WebPlatform Docs​​

​​W3Schools Online Web Tutorials​​​​MDN Web Docs (mozilla.org)​​​​CSS Gradients - Radial Gradients - CSSPortal​​​​Welcome to Web Platform Docs · WebPlatform Docs​​

css generators样式生成器

​​The ultimate tools for web development | Web Code Tools​​​​CSS Generator (css-generator.netlify.app)​​(for all css styles )​​CSS Gradient Generator - CSS Portal​​(espacially for gradient)

values

Values “Permalink to Values”)

​​​​​​​The position of the gradient, interpreted in the same way as ​​​background-position​​​ or ​​​transform-origin​​​. If unspecified, it defaults to ​​center​​.​​​​​The gradient’s ending-shape. The value can be ​​circle​​ (meaning that the gradient’s shape is a circle with a constant radius) or ​​ellipse​​ (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to ​​ellipse​​.​​​​Determines the size of the gradient’s ending shape. If omitted it defaults to farthest-corner. It can be given explicitly or by keyword. For the purpose of the keyword definitions, consider the gradient box edges as extending infinitely in both directions, rather than being finite line segments.

Both circle and ellipse gradients accept the following keywords for their​​​​:

If​​​​​ is specified as​​circle​​​, the size may be given explicitly as a​​​​​​, which provides an explicit circle radius. Negative values are invalid.If​​​​​ is specified as​​ellipse​​​ or is omitted, the size may be given as a​​​​​​ with two values to provide an explicit ellipse size. The first value represents the horizontal radius, the second the vertical radius. Percentages values are relative to the corresponding dimension of the gradient box. Negative values are invalid.

| Keyword | Description || :------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: ||​​​closest-side​​​ | The gradient’s ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). ||​​​closest-corner​​​ | The gradient’s ending shape is sized so that it exactly meets the closest corner of the box from its center. ||​​​farthest-side​​​ | Similar to​​closest-side​​​, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides). ||​​​farthest-corner​​ | The default value, the gradient’s ending shape is sized so that it exactly meets the farthest corner of the box from its center. |

​​​​​A color-stop’s ​​​​​​ value, followed by an one or two optional stop positions (either a ​​​​​​ or a ​​​​​​ along the gradient’s axis). A percentage of ​​0%​​, or a length of ​​0​​, represents the center of the gradient; the value ​​100%​​ represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.​​​​The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

position Value

​​ - CSS: Cascading Style Sheets | MDN (mozilla.org)​​The​​​​ data type is specified with one or two keywords, with optional offsets.The keyword values are​​center​​​,​​top​​​,​​right​​​,​​bottom​​​, and​​left​​​. Each keyword represents either an edge of the element’s box or the center line between two edges. Depending on the context,​​center​​ represents either the center between the left and right edges, or the center between the top and bottom edges.If specified, an offset can be either a relative​​​​​​​ value or an absolute​​​​​​ value. Positive values are offset towards the right or the bottom, whichever is appropriate. Negative values are offset in the opposite directions.If only a single offset value is specified, it defines the x-coordinate, with the value for the other axis defaulting to​​center​​.

/* 1-value syntax */keyword /* Either the horizontal or vertical position; the other axis defaults to center */value /* The position on the x-axis; the y-axis defaults to 50% *//* 2-value syntax */keyword keyword /* A keyword for each direction (the order is irrelevant) */keyword value /* A keyword for horizontal position, value for vertical position */value keyword /* A value for horizontal position, keyword for vertical position */value value /* A value for each direction (horizontal then vertical) *//* 4-value syntax */keyword value keyword value /* Each value is an offset from the keyword that precedes it */

snytax

​​radial-gradient ([ [ || ] [ at ] ? , | at , ] ? [ , ] +)​​

排版

/* 语法大致分为两部分,第一部分较为灵活(存在较多简写形式) */ /* radial-gradient ( [ (comment:形状/大小/位置;从优先级低的开始看起,划分长句(从`|`互斥符到`[]`以及`||`,`&&`)) [ [ || ] [[ at ] ? ], | [at ] , ] ? (comment:由于将重复多次,且需要以`,`分割,故而将`,`纳入到后面的`[]`比较合适) ] [ , ] + ) */

position

Optional value that specifies the center of the gradient. This value can take the same values as the ​​background-position​​ property. If this value is omitted, it defaults to center.

shape

Optional value that specifies the ending shape of the gradient. If this value is omitted, the ending shape is a circle if the size parameter is a single length value, and an ellipse otherwise.

size

Optional value that specifies the size of the gradient’s ending shape. If this value is omitted, it defaults to farthest-corner.

color-stop

At least two color stops are required.Each color stop has one or two components—​​a color component​​​ and​​an optional position component​​.The first component defines the color component of a stop point for the gradient.

Each stop point has its own designated color, and the area between each point is​​filled with a continuous color transition from one to the other​​.This value can be any supported color value.

The second component is​​an optional percentage or decimal value​​​that indicates where along the gradient ray (similar to a gradient line in a​​linear-gradient​​, but from the center outward) to place the color stop.

“0%” indicates the start of​​the gradient ray​​​, and “100%” indicates the point​​where the gradient ray intersects the ending shape​​.For instance, a value of “20%” indicates​​the color stop​​ should be placed at a point 20% of the length of the gradient ray, starting from the beginning of the line.Values can be​​negative​​​, which indicates that the specified color for that value is at mid-transition to the next color at the center of the gradient, so the visible color at the center will be somewhere​​between the specified color and the next color.​​Values can be greater than 100%, which specifies a location​​a correspondingly greater distance​​from the center of the gradient.

examples:

codes:

gradient demos

sides:

corners

codes2:

为了使得轮廓更加清晰,我将过渡颜色种类设置为2,渐变区间设置为0设置为

gradient demos

sides:

corners

相关资料

​​CSS Gradients - Radial Gradients - CSSPortal​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。