css3属性之---背景渐变linear-gradient()
时间:2019-10-22
本文章向大家介绍css3属性之---背景渐变linear-gradient(),主要包括css3属性之---背景渐变linear-gradient()使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
定义与用法
linear-gradient() 函数用于创建一个线性渐变的 "图像"。
为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。
CSS 语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction: 用角度值指定渐变方向(或角度)
color-stop1, color-stop2, ...: 用于指定渐变的起止颜色
案例
1. 默认渐变方向是从上至下
background: linear-gradient(yellow, green)
2. 可以用角度值定义渐变方向(可以写成角度 deg)
background: linear-gradient(to top, yellow, green) /*to top 从下至上 相当于 0deg*/ background: linear-gradient(to right, yellow, green) /*to right 从下至上 相当于 90deg*/ background: linear-gradient(to bottom, yellow, green) /*to bottom 从下至上 相当于 180deg*/ background: linear-gradient(to left, yellow, green) /*to left 从下至上 相当于 270deg*/ background: linear-gradient(to top right, yellow, green) /*to top right 沿对角线的方向*/
3. 可以用px或百分比指定起始颜色的位置, 默认值为0%
background: linear-gradient(to top right, yellow 50%, green)
background: linear-gradient(to top right, yellow, green 50%)
background: linear-gradient(to top right, yellow 50%, green 0); /* 注意: 起始颜色的位置是从它自身所占的位置开始计算的, 第一个占了50%, 那第二个的 0 就是从50%开始 */
4. 多次使用 linear-gradient() 时
background: linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #162e48 0), linear-gradient(135deg, red 40%, blue, transparent 0), linear-gradient(45deg, black, transparent); /* 后面一条会填充前面一条的透明色 */
5. 看到一个按钮效果, 收藏
<div class="div4"> <div class="div4-1 active">OFF</div> <div class="div4-2">ON</div> </div>
.div4 { width: 144px; height: 30px; line-height: 30px; background: #162e48; color: #fff; text-align: center; margin-bottom: 30px; } .div4-1, .div4-2 { width: 86px; float: left; } .div4-1.active { margin-right: -28px; background: linear-gradient(-135deg, transparent 20px, #f00 0); } .div4-2.active { margin-left: -28px; background: linear-gradient(45deg, transparent 20px, #f00 0); }
原文地址:https://www.cnblogs.com/---godzilla---/p/11718619.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- YII框架http缓存操作示例
- 基于tf.shape(tensor)和tensor.shape()的区别说明
- PHP检查URL包含特定字符串实例方法
- Python使用xlrd实现读取合并单元格
- python模块如何查看
- YII框架页面缓存操作示例
- PHP chunk_split()函数讲解
- Python3爬虫中Ajax的用法
- stripos函数知识点实例分享
- PHP实现字符串大小写转函数的功能实例
- 在django中实现choices字段获取对应字段值
- python语言中有算法吗
- jQuery ajax+PHP实现的级联下拉列表框功能示例
- PHP+mysql防止SQL注入的方法小结
- 浅谈tensorflow 中的图片读取和裁剪方式