CSS linear-gradient属性案例详解

目录
  • 一、介绍
  • 二、使用技巧
    • 2.1 方格背景
    • 2.2 棋盘效果

linear-gradient是css3的一个属性，功能强大，但是因为使用的灵活性，让没接触过的人感觉不好下手，下面来一起学习一下：

一、介绍

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;

到此这篇关于CSS linear-gradient属性案例详解的文章就介绍到这了,更多相关CSS linear-gradient属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Android使用LinearLayout设置边框

    Android使用LinearLayout设置边框

    找到好多人的,都是文章随便copy,自己都不验证下,特别说LinearLayout中可以设置他的divider属性的,我在Android Studio中试了,根本显示不出来,这边是csdn上一个朋友回答的,我收藏了,放到这里,后面备用. 1.定一个underline的xml文件,把它放到drawable下 underline.xml <?xml version="1.0" encoding="UTF-8"?> <layer-list xmlns:a

  • 动态添加LinearLayout的高度实例

    实例如下: WindowManager wm = (WindowManager) getContext() .getSystemService(Context.WINDOW_SERVICE); int width = wm.getDefaultDisplay().getWidth(); int height = (int) (width - 22*density) / 3; LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mL

  • Android基础之获取LinearLayout的宽高

    前言 看到题目获取LinearLayout宽高,或许大家想到的解决方法如下: public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayout ll = (LinearLayout) findViewById(R.id.layInfo); Log.i("w", ll.getWidth()+"L"+ll.getHeight()); } 你

  • Android中的LinearLayout布局

    Android中的LinearLayout布局

    LinearLayout : 线性布局 在一般情况下,当有很多控件需要在一个界面列出来时,我们就可以使用线性布局(LinearLayout)了,  线性布局是按照垂直方向(vertical)或水平方向(horizontal)的顺序依次排序子元素,每一个子元素都位于前一个元素之后,下面我们就简单的了解一下吧 在XML布局文件中会遇到如下一些单位 px:是屏幕的像素点   dp:一个基于density的抽象单位,屏幕的物理尺寸   sp:同dp相似,但会根据用户的字体大小进行缩放 XML代码如下:改

  • android中LinearLayoutManager一键返回顶部示例

    android中LinearLayoutManager一键返回顶部示例

    之前在学习RecyclerView的时候,建立了一个可以滑动的View列表,但是当滑动距离过长的时候,需要手动返回到顶部,于是加了一个一键返回顶部的按钮. 效果图 要实现这种效果,有两点需要实现: 1.控制LanyoutManager滑动距离,根据滑动状态(距离)改变去设置隐藏或者显示. 2.设置top的点击事件,点击回到顶部. 很遗憾LayoutManager只提供给了我们获取第一个可见item的高度的方法,而这里我们需要获取的是从开始到现在滑动的总距离,所以不得不动手去自己写,网上也有很多方

  • Android编程使用LinearLayout和PullRefreshView实现上下翻页功能的方法

    本文实例讲述了Android编程使用LinearLayout和PullRefreshView实现上下翻页功能的方法.分享给大家供大家参考,具体如下: 前看过网易云阅读客户端,里面的文章可以实现上下拉动实现上下翻页的效果,感觉体验效果很不错. 公司新版本项目的开发中也要求实现类似的效果,不过还好项目需求里面可以提前知道需要实现上下拉动翻页的总的页数.如果像网易那种不提前知道总的页数感觉控制好LinearLayout里面的childView应该也可以达到效果. 好记性不如烂笔头,先写下我提前知道总页

  • Android自定义LinearLayout布局显示不完整的解决方法

    Android自定义LinearLayout布局显示不完整的解决方法

    发现问题 原需求,在一个伸缩列表中,自定义LinearLayout继承LinearLayout动态添加布局. 然而实现的时候:一共遍历了30条数据,却只显示了一条 断点查看代码:遍历addView()这个过程是正常的30次循环.那是布局的问题? 感觉没毛病...试着在自定义布局外层再加一层LinearLayout垂直方向,wrap_content和match_parent?都试了依旧无效 毛发都被抓掉了好几根 . . 只能谷歌,找度娘了 终于翻到这个Android - 自定义View不显示,非常

  • Android LinearLayout实现自动换行

    Android LinearLayout实现自动换行

    由于前段时间项目中使用到了自动换行的线性布局,本来打算用表格布局在里面一个个的用Java代码添加ImageView的,但是添加的View控件是不确定的,因为得靠服务器的数据返回,就这样手动用Java代码画布局的方式就这样夭折了,因为在表哥布局中我无法确定一行显示多少个ImageView的数目,所以无法动态添加,最后自能自己去看看那种能够换行的线性布局了,线性布局比较不好的是不能自动换行,也就是当设置LinearLayout的orentation 设置为vertical 为竖直方向也就是只有一列,

  • CSS linear-gradient属性案例详解

    CSS linear-gradient属性案例详解

    目录 一.介绍 二.使用技巧 2.1 方格背景 2.2 棋盘效果 linear-gradient是css3的一个属性,功能强大,但是因为使用的灵活性,让没接触过的人感觉不好下手,下面来一起学习一下: 一.介绍 linear-gradient 是一种实现线性渐变的属性,顾名思义,它的特点的是控制渐变,特点是线性的进行控制. 属性介绍: linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]+); 可以简化为: 1.

  • Java之Buffer属性案例详解

    Java之Buffer属性案例详解

    一.前言 熟悉NIO的人想必一定不会陌生buffer中position,limit,capacity这三个属性吧,之前在学习的时候遇到一个问题:就是当你先往缓冲区写入一部分数据,然后调用flip()方法,再全部读取完数据,然后再调用flip()方法,此时这三个值的变化是怎样的,研究了一下,决定写下来分享一下. 二.正文 1.介绍 position: 它指的是下一次读取或写入的位置. limit: 指定还有多少数据需要写出(在从缓冲区写入通道时),或者还有多少空间可以读入数据(在从通道读入缓冲区时

  • CSS自定义滚动条样式案例详解

    CSS自定义滚动条样式案例详解

    CSS3自定义滚动条样式 -webkit-scrollbar 当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义. 首先我们要了解滚动条.滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深. 滚动条的css样式主要有三部分组成: ::-webkit-scrollbar   定义了滚动条整体的样式: ::-webkit-scrollbar-thum

  • Vue的方法和属性案例详解

    vue的方法和属性 1.方法 methods 用法1 methods:{ 方法名:function(){}, } 用法2 methods:{ 方法名(){} } 注意 {{}}调用要写() 示例 {{aa()}} 事件触发 @click=aa"可以有()也可以没有如果需要传参,加上() 把$event这个特殊参数传进去可以获取事件对象 2.计算属性 计算属性是什么 computed 计算属性的特点 计算属性有缓存 计算属性是基于他们的依赖进行缓存的 计算属性只有在他的相关依赖发生改变时才会重新求

  • JS删除对象中某一属性案例详解

    代码如下 var obj={ name: 'zhagnsan', age: 19 } delete obj.name //true typeof obj.name //undefined 通过delete操作符, 可以实现对对象属性的删除操作, 返回值是布尔 可以删除其他东西吗 1.变量 var name ='zs' //已声明的变量 delete name //false console.log(typeof name) //String age = 19 //未声明的变量 delete ag

  • CSS hack用法案例详解

    CSS hack用法案例详解

    之前一直很狭隘的对CSS hack持有偏见,觉得写得规范的代码不应该使用这些"邪门歪道",可最近产品发布一个小问题却让我头疼了很久,最后查了一下资料,竟然使用CSS hack轻松解决了,不得不服啊,对付神奇的IE就得使用这些利器. 什么是CSS hack 由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack. 常用的CSS hack 有三种方式,CSS 内部hack.选择器hack.HTM

  • C# 控件属性和InitializeComponent()关系案例详解

    C# 控件属性和InitializeComponent()关系案例详解

    namespace Test22 { partial class Form1 { /// <summary> /// 必需的设计器变量. /// </summary> private System.ComponentModel.IContainer components = null; /// <summary> /// 清理所有正在使用的资源. /// </summary> /// <param name="disposing"&

  • Python Pycurl的属性与方法案例详解

    Pycurl包是一个libcurl的Python接口,由C语言编写的,功能强大,速度快.由于pycurl的属性和方法太多了,写这篇博文记录一下pycurl的属性和方法. 正常安装 pip install pycurl 如果出现问题,可以按照系统版本搜索安装方法,比如centos7.1 安装pycurl 通用请求方法 import pycurl,urllib from io import BytesIO url = 'http://www.baidu.com' headers = [ "User-

  • BootStrap的JS插件之轮播效果案例详解

    BootStrap的JS插件之轮播效果案例详解

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 案例 下面展示的就是此插件和相关组件制作的轮播案例. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

随机推荐