王磊网站建设,怎样在微信小程序里开店,做网站首页图片,简单logo设计图片文章目录 一、介绍二、使用技巧2.1 方格背景2.2 棋盘效果 linear-gradient是css3的一个属性#xff0c;功能强大#xff0c;但是因为使用的灵活性#xff0c;让没接触过的人感觉不好下手#xff0c;下面来一起学习一下#xff1a; 一、介绍
MDN介绍文档 linear-gradient … 文章目录 一、介绍二、使用技巧2.1 方格背景2.2 棋盘效果 linear-gradient是css3的一个属性功能强大但是因为使用的灵活性让没接触过的人感觉不好下手下面来一起学习一下 一、介绍
MDN介绍文档 linear-gradient 是一种实现线性渐变的属性顾名思义它的特点的是控制渐变特点是线性的进行控制。 属性介绍 linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]); 可以简化为 1.关于控制线性变化的参数可以是多个以逗号分隔 2.每一个控制线性变化的单元有两部分组成 3.第一部分是线性变化的方向有两种形式第一种形式是是角度顺时针增加比较灵活第二种形式是包含to和两个关键词第一个指出水平位置left or right第二个指出垂直位置top or bottom。关键词的先后顺序无影响且都是可选的。to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。这种相对于角度的设置比较单一只能设置8个方向两个是夹角方向 4.第二部分是变化的颜色默认是渐变过程平分整个区域可以以颜色 停止点的形式来设置某一个颜色变化的位置区间这个也是支持多个理论上没有限制。 即linear-gradient(角度或者(to 方向) 颜色单元);
二、使用技巧
2.1 方格背景
线性渐变配合着backage-size有着意想不到的效果 实现 background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 10%); background-size: 30px 30px; background-color: white; height: 200px; 2.2 棋盘效果 实现 background-image: linear-gradient(45deg,#ccc 25%,transparent 0), linear-gradient(45deg,transparent 75%,#ccc 0), linear-gradient(45deg,#ccc 25%,transparent 0), linear-gradient(45deg,transparent 75%,#ccc 0); background-position: 0 0,-15px 15px,15px -15px,30px 30px; background-size: 30px 30px; background-color: white;
