css linear-gradient实现背景渐变色
2024-08-30
19
CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型,是一种特别的<image>数据类型。
linear-gradient用法示例
linear-gradient用法示例
/* 渐变轴为45度,从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上,从蓝色开始渐变、到高度 40% 位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
如同其他 gradient 函数一般,linear-gradient() 函数没有内在尺寸;即,它不具备固有的或首选的尺寸,也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。
linear-gradient浏览器兼容性
这里包含了所有前缀的渐变设置。
.grad {
background-color: #F07575; /* 不支持渐变的浏览器回退方案 */
background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Firefox (3.6 to 15) */
background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持旧 Opera (11.1 to 12.0) */
background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* 标准语法; 需要最新版本 */
}
-moz-前缀的规则用于兼容 Fx 3.6 to Fx 15 的火狐浏览器。 -webkit-前缀的规则用于兼容在 Android 4.3 以前版本、iOS 6.1 以前版本、Safari 6。当使用带前缀的规则时,不要加“to”关键字。
如果将<body>标签的 background-image 属性设置为线性渐变linear-gradient,除非您还设置文档根标签(例如<html>标签)的min-height属性,否则渐变不会填充浏览器屏幕到 100%。
更新于:19天前赞一波!
相关文章
- CSS 边框属性总结
- position:sticky纯css实现粘性定位让元素滚到顶部固定
- css页面内容不够高footer始终位于页面底部
- HTML-CSS-JS Prettify 代码格式化插件
- 网页内容很少时让footer处于最下方
- css改变progress进度条颜色
- css transform实现图片旋转
- css -webkit-line-clamp有什么用?
- css实现超过两行变省略号
- css修改鼠标的颜色样式
- 前端框架Tailwind CSS用法
- CSS布局:完全掌握position属性
- 提升网站可访问性的CSS实践方法
- @import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.bundle.scp.css'
- 用HTML和CSS创建简洁而美观的树形菜单
- 使用HTML和CSS创建漂亮的柱状图
- 探究并解决CSS Grid布局中的间隙问题
- 解决CSS Flex布局中的对齐难题
- 记录一次前端项目中CSS布局问题的解决历程
- 解决CSS布局中的浮动元素问题
文章评论
全部评论