html基礎之渐变属性(斑马线)
本篇简单的介绍一下渐变属性,因为最近用到比较多
渐变属性分为两个:线性渐变和径向渐变,下面简单的介绍一下
线性渐变
background-image:linear-gradient(渐变角度,颜色值1 n%,颜色值2 n%…);
起始颜色会沿一条直线过渡到结束色,各颜色之间用“,”隔开。每个颜色值后可以加一个百分比数值,用以标明颜色渐变的位置 (可不写)
渐变角度 :指水平线和渐变线之间的角度,也可用英语表示, 默认为 180deg ,按照下面实例,渐变颜色为红,黄,蓝从上到下依次排列
实例如下:
div{
width: 300px;
height: 100px;
/* background: linear-gradient(0deg ,red 30%,yellow 60%,blue); */
/* background: linear-gradient(90deg ,red 30%,yellow 60%,blue); */
/* background: linear-gradient(45deg ,red 30%,yellow 60%,blue); */
background: linear-gradient(0deg ,red ,yellow ,blue);
斑马线的做法
background: linear-gradient(45deg,red 25%,blue 0,blue 50%,
red 0,red 75%,blue 0);
}
径向渐变
background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2…);
起始颜色会从一个中心点开始,依据椭圆或圆形进行扩张渐变 。每个颜色 值后可以加一个百分比数值,用以标明颜色渐变的位置 (可不写)
渐变形状: 定义径向渐变的形状,可以是定义水平和垂直半径的像素值或百分比,或相应的关键词
- 像素值/百分比 定义形状的水平和垂直半径
- circle 指定圆形的径向渐变
- ellipse 指定椭圆形的径向渐变(默认)
圆心位置: 确定元素渐变的中心位置,省略的话默认为center
代码实例如下,很多和线性渐变相同,就不在重复了;
background: radial-gradient(red ,yellow ,blue);
background: radial-gradient(circle,red ,yellow ,blue);
background: radial-gradient(200px 300px,red ,yellow ,blue);
设置圆心的位置
background: repeating-radial-gradient(circle at 10% 10%,red ,yellow ,blue);
重复线性渐变
background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2…);
括号内的参数取值与线性渐变相同,分别用于定义渐变角度和颜色值,需要注意的是不添加范围的话和线性渐变相同
background: repeating-linear-gradient(45deg,red 50px,yellow 150px);
重复径向渐变
background-image:repeating-radial-gradient(参数值)
括号内的参数取值与径性渐变相同,分别用于定义渐变形状,圆心位置和颜色值,但是一般需要添加范围 ,不然很怪异
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析