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

css 渐变 radial-gradient()

references

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)
- CSS Gradient — Generator, Maker, and Background

values

Values “Permalink to Values”)

<position>The position of the gradient, interpreted in the same way as background-position or transform-origin. If unspecified, it defaults to center.
<ending-shape>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.
<size>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 <size>:
  - If <ending-shape> is specified as circle, the size may be given explicitly as a <length>, which provides an explicit circle radius. Negative values are invalid.
  - If <ending-shape> is specified as ellipse or is omitted, the size may be given as a <length-percentage> 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 toclosest-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. |
<linear-color-stop>A color-stop’s <color> value, followed by an one or two optional stop positions (either a <percentage> or a <length> 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.
<color-hint>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

<position> - CSS: Cascading Style Sheets | MDN (mozilla.org)
The <position> 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 <percentage> value or an absolute <length> 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 ([ [ <shape> || <size> ] [ at <position> ] ? , | at <position> , ] ? <color-stop> [ , <color-stop> ] +)

排版

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

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.

Value	Meaning
ellipse	Indicates gradient is in the shape of an ellipse.
circle	Indicates gradient is in the shape of an circle.

size

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

Value	Meaning
	One or two space-delimited length values or two percentages. If one length value is specified, it indicates the radius of the circle. If two values (length or percent) are specified, the first value represents the horizontal radius, and the second the vertical radius. Percentage values are relative to the corresponding dimension of the gradient box. Percentages can only be used to specify the size of an elliptical gradient, not a circular one.Negative values are invalid.
closest-side	For circular gradients, this value indicates that the ending-shape is circle sized so that it exactly meets the side of the box closest to its center. For elliptical gradients, the gradient-shape is an ellipse size so that it exactly meets the vertical and horizontal sides of the box closest to its center.
closest-corner	Sizes the gradient-shape so that it exactly meets the closest corner of the box from its center. For elliptical gradients, the gradient-shape has the same ratio of width to height that it would ifclosest-sidewas specified.
farthest-side	Similar toclosest-side, except the gradient-shape is sized to meet the side of the box that is farthest from its center (for circular gradients) or the farthest vertical and horizontal sides (for elliptical gradients).
farthest-corner	Sizes the gradient-shape so that it exactly meets the farthest corner of the box from its center. For elliptical gradients, the gradient-shape has the same ratio of width to height that it would iffarthest-sidewas specified.

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 valuethat 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 locationa correspondingly greater distancefrom the center of the gradient.

examples:

codes:

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }
 
        .box {
            border: dotted 2px hotpink;
            margin: 3px;
            display: block;
            width: 100%;
            height: 50%;
 
            display: flex;
            flex-flow: wrap;
        }
 
        .radial-gradient {
            /* display: inline; */
            background: radial-gradient(red, yellow, rgb(30, 144, 255));
        }
 
        .radial-gradient_blue {
            background: rgb(9, 121, 57);
            background: radial-gradient(circle, rgb(39, 91, 233) 26%, rgba(2, 0, 36, 1) 100%, rgba(0, 212, 255, 1) 100%);
        }
 
        .radial_gradient_variants {
            /* 一下三个值的效果一致 */
            background-image: radial-gradient(yellow, blue);
            background-image: radial-gradient(ellipse at center, yellow 0%, blue 100%);
            background-image: radial-gradient(farthest-corner at 50% 50%, yellow, blue);
            /* background-image: radial-gradient(circle, yellow, blue); */
            background-image: radial-gradient(farthest-side at left bottom, #FFF133, #16D611 100px, #00A3EF);
            background-image: radial-gradient(closest-side at 40px 50px, #FFF133,   #00A3EF);
            background-image: radial-gradient(farthest-side, #FFF133 70%, #00A3EF 100%);
            background-image: radial-gradient(farthest-corner, #FFF133 99%, #00A3EF 100%);
            background-image: radial-gradient(farthest-side, #FFF133 99%, #00A3EF 100%);
            background-image: radial-gradient(closest-side, #FFF133 100%, #00A3EF 100%);
 
        }
 
        /* 语法大致分为两部分,第一部分较为灵活(存在较多简写形式) */
        /* radial-gradient (
            [          
                (comment:形状/大小/位置;从优先级低的开始看起,划分长句(从`|`互斥符到`[]`以及`||`,`&&`))
                [ 
                    [ <shape> || <size> ] [[ at <position> ] ? ],
                        | [at <position>] , 
                ] ? 
                (comment:由于<color-stop>将重复多次,且需要以`,`分割,故而将`,`纳入到后面的`[]`比较合适)
            ] <color-stop> [ , <color-stop> ] +
        ) */
 
 
        .radial-gradient-sizes {
            background-image: radial-gradient(farthest-side at left bottom, #FFF133, #16D611 100px, #00A3EF);
        }
 
        /* The following examples set the center of the gradient at 40px from the left side of the gradient box and 50px from the top side of the gradient box.  */
        /* ellipse shapes:(default shape) */
        /* sides:ellipse */
        .closest-side-ellipse {
            /*        
            The first example uses closest-side, so the ending shape of the gradient is defined by the closest sides of the gradient box—namely, the top and left sides. */
 
            background-image: radial-gradient(closest-side at 40px 50px, #FFF133,   #00A3EF);
        }
 
        .farthest-side-ellipse {
            /* The second example uses farthest-side, so the ending shape of the gradient is defined the farthest sides of the gradient box—namely, the right and bottom sides. */
 
            background-image: radial-gradient(farthest-side at 40px 50px, #FFF133,   #00A3EF);
        }
 
        /* corners:ellipse */
        .closest-corner-ellipse {
            /*        
            The first example uses closest-side, so the ending shape of the gradient is defined by the closest sides of the gradient box—namely, the top and left sides. */
 
            background-image: radial-gradient(closest-corner at 40px 50px, #FFF133,   #00A3EF);
        }
 
        .farthest-corner-ellipse {
            /* The second example uses farthest-side, so the ending shape of the gradient is defined the farthest sides of the gradient box—namely, the right and bottom sides. */
 
            background-image: radial-gradient(farthest-corner at 40px 50px, #FFF133,   #00A3EF);
        }
 
        /* circle shapes: */
 
        /* sides:circle */
        .closest-side-circle {
 
            /* If you use closest-side or farthest-side with circular gradients, the size is determined by the closest side of the gradient box. For the following closest-side example, that side is the left side. */
 
            background-image: radial-gradient(closest-side circle at 40px 50px, #FFF133,   #00A3EF);
        }
 
        .farthest-side-circle {
            /* For the following farthest-side example, the size of the circle gradient is determined by the right side of the gradient box. */
 
            background-image: radial-gradient(farthest-side circle at 40px 50px, #FFF133,   #00A3EF);
        }
 
        /* corners:circle */
        .closest-corner-circle {
            background-image: radial-gradient(closest-corner circle at 40px 50px, #FFF133,   #00A3EF);
        }
 
        .farthest-corner-circle {
 
 
            background-image: radial-gradient(farthest-corner circle at 40px 50px, #FFF133,   #00A3EF);
        }
 
 
        div>div>div,
        .offset_40_50 {
            border: dotted 2px;
            /* border-width: 0px 1px 1px 0px; */
            border-left-width: 0;
            border-top-width: 0;
            width: 40px;
            height: 50px;
        }
 
        /* 
        background-image: radial-gradient(yellow, blue);
        background-image: radial-gradient(ellipse at center, yellow 0%, blue 100%);
        background-image: radial-gradient(farthest-corner at 50% 50%, yellow, blue); */
        div {
            display: flex;
            flex-flow: wrap;
        }
 
        div>div {
            /* display: inline-flex; */
            height: 40%;
            width: 48%;
            border: solid 1px;
        }
    </style>
</head>
 
<body>
    <h1>gradient demos</h1>
 
    <h2>sides:</h2>
    <div class="box">
        <!-- <div>test</div> -->
        <div class="closest-side-ellipse">
            <div class="offset_40_50"></div>
        </div>
        <div class="farthest-side-ellipse">
            <div></div>
        </div>
        <div class="closest-side-circle">
            <div></div>
        </div>
        <div class="farthest-side-circle">
            <div></div>
        </div>
        <!-- <div class="radial_gradient_variants">ter</div> -->
 
    </div>
    <h2>corners</h2>
    <div class="box">
        <!-- <div>test</div> -->
        <div class="closest-corner-ellipse">
            <div class="offset_40_50"></div>
        </div>
        <div class="farthest-corner-ellipse">
            <div></div>
        </div>
        <div class="closest-corner-circle">
            <div></div>
        </div>
        <div class="farthest-corner-circle">
            <div></div>
        </div>
        <!-- <div class="radial_gradient_variants">ter</div> -->
 
    </div>
 
    <!-- <h2>test</h2>
    <div class="box">
        <div class="radial-gradient-sizes"></div>
        <div class="radial-gradient">e1</div>
        <div class="radial-gradient_blue"></div>
        <div class="radial_gradient_variants">ter</div>
 
    </div> -->
</body>
 
</html>

codes2:

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

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }
 
        .box {
            border: dotted 2px hotpink;
            margin: 3px;
            display: block;
            width: 100%;
            height: 50%;
 
            display: flex;
            flex-flow: wrap;
        }
 
        .radial-gradient {
            /* display: inline; */
            background: radial-gradient(red, yellow, rgb(30, 144, 255));
        }
 
        .radial-gradient_blue {
            background: rgb(9, 121, 57);
            background: radial-gradient(circle, rgb(39, 91, 233) 26%, rgba(2, 0, 36, 1) 100%, rgba(0, 212, 255, 1) 100%);
        }
 
        .radial_gradient_variants {
            /* 一下三个值的效果一致 */
            background-image: radial-gradient(yellow, blue);
            background-image: radial-gradient(ellipse at center, yellow 0%, blue 100%);
            background-image: radial-gradient(farthest-corner at 50% 50%, yellow, blue);
            /* background-image: radial-gradient(circle, yellow, blue); */
            background-image: radial-gradient(farthest-side at left bottom, #fff133 50%, #16D611 100px, #00A3EF 50%);
            background-image: radial-gradient(closest-side at 40px 50px, #fff133 50%,   #00A3EF 50%);
            background-image: radial-gradient(farthest-side, #fff133 50% 70%, #00A3EF 50% 100%);
            background-image: radial-gradient(farthest-corner, #fff133 50% 99%, #00A3EF 50% 100%);
            background-image: radial-gradient(farthest-side, #fff133 50% 99%, #00A3EF 50% 100%);
            background-image: radial-gradient(closest-side, #fff133 50% 100%, #00A3EF 50% 100%);
 
        }
 
        /* 语法大致分为两部分,第一部分较为灵活(存在较多简写形式) */
        /* radial-gradient (
            [            
                (comment:形状/大小/位置;从优先级低的开始看起,划分长句(从`|`互斥符到`[]`以及`||`,`&&`))
                [ 
                    [ <shape> || <size> ] [[ at <position> ] ? ],
                        | [at <position>] , 
                ] ? 
                (comment:由于<color-stop>将重复多次,且需要以`,`分割,故而将`,`纳入到后面的`[]`比较合适)
            ] <color-stop> [ , <color-stop> ] +
        ) */
 
 
        .radial-gradient-sizes {
            background-image: radial-gradient(farthest-side at left bottom, #fff133 50%, #16D611 100px, #00A3EF 50%);
        }
 
        /* The following examples set the center of the gradient at 40px from the left side of the gradient box and 50px from the top side of the gradient box.  */
        /* ellipse shapes:(default shape) */
        /* sides:ellipse */
        .closest-side-ellipse {
            /*          
            The first example uses closest-side, so the ending shape of the gradient is defined by the closest sides of the gradient box—namely, the top and left sides. */
 
            background-image: radial-gradient(closest-side at 40px 50px, #fff133 50%,   #00A3EF 50%);
        }
 
        .farthest-side-ellipse {
            /* The second example uses farthest-side, so the ending shape of the gradient is defined the farthest sides of the gradient box—namely, the right and bottom sides. */
 
            background-image: radial-gradient(farthest-side at 40px 50px, #fff133 50%,   #00A3EF 50%);
        }
 
        /* corners:ellipse */
        .closest-corner-ellipse {
            /*          
            The first example uses closest-side, so the ending shape of the gradient is defined by the closest sides of the gradient box—namely, the top and left sides. */
 
            background-image: radial-gradient(closest-corner at 40px 50px, #fff133 50%,   #00A3EF 50%);
        }
 
        .farthest-corner-ellipse {
            /* The second example uses farthest-side, so the ending shape of the gradient is defined the farthest sides of the gradient box—namely, the right and bottom sides. */
 
            background-image: radial-gradient(farthest-corner at 40px 50px, #fff133 50%,   #00A3EF 50%);
        }
 
        /* circle shapes: */
 
        /* sides:circle */
        .closest-side-circle {
 
            /* If you use closest-side or farthest-side with circular gradients, the size is determined by the closest side of the gradient box. For the following closest-side example, that side is the left side. */
 
            background-image: radial-gradient(closest-side circle at 40px 50px, #fff133 50%,   #00A3EF 50%);
        }
 
        .farthest-side-circle {
            /* For the following farthest-side example, the size of the circle gradient is determined by the right side of the gradient box. */
 
            background-image: radial-gradient(farthest-side circle at 40px 50px, #fff133 50%,   #00A3EF 50%);
        }
 
        /* corners:circle */
        .closest-corner-circle {
            background-image: radial-gradient(closest-corner circle at 40px 50px, #fff133 50% 50%,   #00A3EF 50% 50%);
        }
 
        .farthest-corner-circle {
 
 
            background-image: radial-gradient(farthest-corner circle at 40px 50px, #fff133 50%,   #00A3EF 50%);
        }
 
 
        div>div>div,
        .offset_40_50 {
            border: dotted 2px;
            /* border-width: 0px 1px 1px 0px; */
            border-left-width: 0;
            border-top-width: 0;
            width: 40px;
            height: 50px;
        }
 
        /* 
        background-image: radial-gradient(yellow, blue);
        background-image: radial-gradient(ellipse at center, yellow 0%, blue 100%);
        background-image: radial-gradient(farthest-corner at 50% 50%, yellow, blue); */
        div {
            display: flex;
            flex-flow: wrap;
        }
 
        div>div {
            /* display: inline-flex; */
            height: 40%;
            width: 48%;
            border: solid 1px;
        }
    </style>
</head>
 
<body>
    <h1>gradient demos</h1>
 
    <h2>sides:</h2>
    <div class="box">
        <!-- <div>test</div> -->
        <div class="closest-side-ellipse">
            <div class="offset_40_50"></div>
        </div>
        <div class="farthest-side-ellipse">
            <div></div>
        </div>
        <div class="closest-side-circle">
            <div></div>
        </div>
        <div class="farthest-side-circle">
            <div></div>
        </div>
        <!-- <div class="radial_gradient_variants">ter</div> -->
 
    </div>
    <h2>corners</h2>
    <div class="box">
        <!-- <div>test</div> -->
        <div class="closest-corner-ellipse">
            <div class="offset_40_50"></div>
        </div>
        <div class="farthest-corner-ellipse">
            <div></div>
        </div>
        <div class="closest-corner-circle">
            <div></div>
        </div>
        <div class="farthest-corner-circle">
            <div></div>
        </div>
        <!-- <div class="radial_gradient_variants">ter</div> -->
 
    </div>
 
    <!-- <h2>test</h2>
    <div class="box">
        <div class="radial-gradient-sizes"></div>
        <div class="radial-gradient">e1</div>
        <div class="radial-gradient_blue"></div>
        <div class="radial_gradient_variants">ter</div>
 
    </div> -->
</body>
 
</html>

1641879331725

相关资料
- CSS Gradients - Radial Gradients - CSSPortal

posted @ 2024-09-09 09:15 xuchaoxin1375 阅读(8) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· css_渐变_多种颜色/stop-colors/纯色区域和渐变区域

· css_linear-gradient解析/flex等分容器+示例

· HTML5-和-CSS-响应式-Web-设计-全-

· CSS3渐变：线性渐变、径向渐变

· 【译】你真的了解 CSS 径向渐变吗？

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

公告

昵称： xuchaoxin1375
园龄： 4年10个月
粉丝： 1
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

xuchaoxin1375