文档章节

linear-gradient 百分比以及斜角的使用

不负好时光
 不负好时光
发布于 2017/07/24 19:39
字数 401
阅读 54
收藏 0

知道CSS3有新的属性叫linear-gradient,但是基本的线性渐变效果不太好看,加上平时没有在项目中用过这个 新属性,因此掌握的不好,今天朋友问我这个问题:

这样的背景图怎么做,然后我就说用背景图呗。然后又转念一想,css3是完全可以实现这个效果的,就试着写了一下,

html:

<div></div>

css:

div{

width:300px;

height:200px;

background:linear-gradient(top, red ,blue);

}

我能一下想到的渐变的写法就是这样。

但是惨了,这样出来的效果是渐变的啊:

 

给他变成:0-50%是红色 50%-50% 是红的渐变成蓝色,50%-100% 是蓝色,就是不用渐变了啊。

写成:background: linear-gradient(top, red ,red 50%,blue 50%,blue);

 

biubiu~biu 变成这样:

下面是加角度:

把第一个参数:top 换成一个角度,但是角度应该是多少呢?

试试吧

0deg 是蓝上 红下,180deg红上 蓝下,好像跟你想的有点不一样,那没关系,算一下就行了,

如设计图上显示,65°的角(我自己量的)。那我的角度应该写成:180-(90-65) = 155°

background: linear-gradient(155deg, red ,red 50%,blue 50%,blue);

效果是:

 

当然你可以继续往后追加颜色:

background: linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);

 

小结:兼容的写法是:

  1. background: -webkit-linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);  
  2. background: -moz-linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);  
  3. background: -o-linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);  
  4. background: linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);  

© 著作权归作者所有

不负好时光
粉丝 22
博文 195
码字总数 99047
作品 0
徐汇
程序员
私信 提问
css奇技淫巧-色彩渐变与动态渐变

渐变色已经很常见了,如何把渐变色做成动态变化或者做出更酷炫的效果? css渐变 CSS 中设置的渐变是 gradient 数据类型,它是一种特别的image数据类型。使用设置,可叠加设置多个; CSS3 定义...

04/19
0
0
linear-gradient渐变中的参数

在看张鑫旭的博客 遇到渐变数值后面带参数不太理解 linear-gradient(to right, #000 6px, transparent 6px) repeat-x, 随百之,试验 http://www.css88.com/book/css/values/image/linear-gr...

红羊在厦门
2018/10/22
0
0
好程序员web前端教程之CSS3渐变

好程序员web前端教程之CSS3渐变,CSS3渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即...

好程序员IT
05/08
0
0
h5实现slider滑块功能及样式自定义

公司最近人手不足,于是,又开始折腾起Html来了 本文主要讲slider滑块的实现、样式自定义、刻度绘制、与输入框的联动 我们先来看看效果图 上图中,我们需要实现的难点就是那个绿色的滑块,其...

ThinkinLiu
2018/07/16
0
0
『Reprint』GRADUAL

CSS渐变之CSS3 gradient在Firefox3.6下的使用 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=727 原文地址:http://hacks.mozilla.org/......

波利beryl
2014/08/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java编程学习-Java虚拟机(JVM)以及跨平台原理

相信大家已经了解到Java具有跨平台的特性,可以“一次编译,到处运行”,在Windows下编写的程序,无需任何修改就可以在Linux下运行,这是C和C++很难做到的。 那么,跨平台是怎样实现的呢?这...

Java领航员
33分钟前
0
0
学JFinal不迷路,JFinal优质资源列表(欢迎反馈更新)

学JFinal不迷路,记录一下JFinal相关的资源、产品、讲师等信息(所有信息排名不分先后)。 一、相关站点: 1、JFinal官网-问答、分享、文档、交流、俱乐部 http://www.jfinal.com 2 、JFina...

山东-小木
36分钟前
1
0
项目学习(2)-order-job

在当前的系统中,因为并发量并不高,服务之间发起异步请求或者异步调用时,没有使用到消息中间件。 而是在各个服务(子系统)的数据库中,创建了event_queue事件对列表和event_handler事件处...

太猪-YJ
45分钟前
1
0
gradle grovvy中的闭包

1. 无参数的闭包 //这b1就是一个闭包def b1={ println "hello b1"}//定义方法,包含闭包类型的参数def method1(Closure closure){closure()}//执行method1method1(b1) 执行结果 ...

edison_kwok
今天
3
0
基于Spring Boot + Dubbo的全链路日志追踪(一)

一、 概要 当前公司后端整体架构为:Spring Boot + Dubbo。由于早期项目进度等原因,对日志这块没有统一的规范,基本上是每个项目自己管自己的日志。这也对后面的问题排查带来了很大的困难,...

明天以后
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部