CSS3的渐变属性 线性渐变 径向渐变 重复线性渐变和径向渐变

鳄鱼君

发表文章数:642

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS » CSS3的渐变属性 线性渐变 径向渐变 重复线性渐变和径向渐变

在CSS3之前,如果需要添加界面效果,通常要设置背景图像来实现。在CSS3中增加了渐变属性,通过渐变属性,也可以轻松的实现界面效果。CSS3的界面效果属性主要包括线性渐变、径向渐变。

CSS3设置线性渐变

线性渐变过程中,起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image:linear-gradient(参数值)”样式可以实现线性渐变效果。它的基本语法格式为:

background-image:linear-gradient(渐变角度,颜色值1,颜色值2...颜色值n);

其中linear-gradient用于定义渐变方式为线性渐变,括号内用于设定渐变角度颜色值

  • 渐变角度指水平线和渐变线之间的夹角,可以是以deg为单位的角度数值或关键词(to+left top right bottom)。
  • 颜色值用于设置渐变颜色,其中“颜色值1”便是起始颜色,“颜色值n”表示结束颜色,起始颜色和结束颜色之间可以添加多个颜色值,各颜色值之间用英文逗号“,”隔开

CSS3设置径向渐变

径向渐变是网页中另一种常用的渐变,在径向渐变过程中,起始颜色会从一个中心点开始,依据椭圆圆形形状进行扩张渐变。运用CSS3中的“background-image:radial-gradient(参数值);”样式可以实现径向渐变。它的基本语法格式为:

background-image:radial-gradient(渐变形状圆心位置,颜色值1,颜色值2...,颜色值n);

其中radial-gradient用于定义渐变的方向为径向渐变,括号内的参数值用于设定渐变形状、圆心位置和颜色值。

  • 渐变形状用来定义径向渐变的形状,其取值既可以是定义水平和垂直半径的像素值或百分比,也可以是相应的关键字。
  • 圆心位置用于确定元素渐变的中心位置,使用“at”加上关键词或参数值来定义径向渐变的中心位置。
  • “颜色值1”表示起始颜色,“颜色值n”表示结束颜色,起始颜色和结束颜色之间可以添加索哥颜色值,各颜色之间用英文逗号“,”隔开。

CSS3设置重复渐变

在网页设计中,经常会遇到已在一个背景上重复应用渐变模式的情况,这时就需要使用重复渐变。重复渐变包括重复线性渐变重复径向渐变

在CSS3中通过“background-image:repeating-linear-gradient (参数值);”样式可以实现重复线性渐变的效果。它的基本语法格式为:

background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);

在CSS3只能够通过“background-image:repeating-radial-gradient(参数值);”样式可以实现重复径向渐变的效果。它的基本语法格式为:

background-image:repeating-radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色值n );

综合应用:

<style type="text/css">
   .one{  /*线性渐变*/
    width: 200px;
    height: 200px;
    background-image: linear-gradient(30deg,#0f0,#00f);
   }
   .two{ /*径向渐变*/
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: radial-gradient(ellipse at center ,#0f0,#030);
   }
   .three{ /*重复线性渐变*/
    width: 200px;
    height: 200px;
    background-image: repeating-linear-gradient(90deg,#E50743,#E8ed30 10%,#3FA62E 15%);
   }
   .four{ /*重复径向渐变*/
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: repeating-radial-gradient(circle at 50% 50%,#E50743,#E8ed30 10%,#3FA62E 15%);
   }
</style>

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS3的渐变属性 线性渐变 径向渐变 重复线性渐变和径向渐变》 发布于2020-04-28

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

2 + 6 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册