使用 CSS 渐变

您所在的位置:网站首页 animate渐变色 使用 CSS 渐变

使用 CSS 渐变

2024-06-30 21:48| 来源: 网络整理| 查看: 265

和线性渐变不同,你可以指定径向渐变的大小。可能的值包括 closest-corner、closest-side、farthest-corner 和 farthest-side,其中 farthest-corner 是默认值。圆的大小为长度,椭圆则是长度和百分比。

示例:椭圆渐变的 closet-side 值

这个例子使用了 closest-side 大小值,意思就是大小是通过开始点(中心)和包围盒的最近一侧的距离设置的。

div { width: 240px; height: 100px; } css.radial-ellipse-side { background: radial-gradient( ellipse closest-side, red, yellow 10%, #1e90ff 50%, beige ); } 示例:椭圆渐变的 farthest-corner 值

这个例子和前一个类似,但是其大小是以 farthest-corner 指定的,这会将渐变的大小设置为从开始点到包围盒的距离开始点的最远角的距离设置的。

div { width: 240px; height: 100px; } css.radial-ellipse-far { background: radial-gradient( ellipse farthest-corner at 90% 90%, red, yellow 10%, #1e90ff 50%, beige ); } 示例:圆形渐变的 closet-side 值

这个例子使用了 closest-side,使得圆的半径是渐变中心到最近一侧的距离。在这个例子中,半径是中心到底部的距离,因为渐变位于左侧 25%、底部 25% 的位置,而 div 元素的高度小于宽度。

div { width: 240px; height: 120px; } css.radial-circle-close { background: radial-gradient( circle closest-side at 25% 75%, red, yellow 10%, #1e90ff 50%, beige ); } 示例:椭圆形渐变长度或百分比

对于椭圆,你可以使用长度或者百分比来设置其大小,第一个值代表了水平半径,第二个值是竖直半径,你可以使用百分比以表示相对于盒在那个维度上的大小的值。在下面这个例子中,我使用了百分比以表示水平半径。

div { width: 240px; height: 120px; } css.radial-ellipse-size { background: radial-gradient( ellipse 50% 50px, red, yellow 10%, #1e90ff 50%, beige ); } 示例:圆形渐变的长度

对于圆,尺寸可以用 提供,这就是圆的尺寸。

div { width: 240px; height: 120px; } css.radial-circle-size { background: radial-gradient(circle 50px, red, yellow 10%, #1e90ff 50%, beige); }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3