linear-gradient 用法小结,不做渐变,做斜型背景。
来源:互联网 发布:北国知春物业 编辑:程序博客网 时间:2024/04/30 03:09
知道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);
小结:兼容的写法是:
background: -webkit-linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);background: -moz-linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);background: -o-linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);background: linear-gradient(155deg, red ,red 50%,blue 50%,blue 80% , green 80%,green);
什么?你问我设计图上的角度我是怎么量出来的?量角器啊。
其实并不是,在ps里面用标尺沿着交接处话一条斜线,上面菜单栏上显示的就有角度。
- linear-gradient 用法小结,不做渐变,做斜型背景。
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)。
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
- CSS3 背景渐变色 linear-gradient的兼容问题
- 背景渐变:html5+css3中的background: -moz-linear-gradient
- css3背景渐变颜色linear-gradient(IE兼容)
- -linear-gradient()线性渐变
- linear-gradient 渐变
- linear-gradient() 实现渐变
- 线性渐变(linear-gradient)
- 关于线性渐变linear-gradient
- CSS3 线性渐变 linear-gradient
- css渐变之linear-gradient
- Css3: gradient背景渐变
- 背景渐变 gradient
- css渐变 -moz-linear-gradient -webkit-gradient
- 线性渐变linear-gradient,放射性渐变radial-gradient,循环渐变
- linear-gradient用法
- 添加lombok插件
- 如何使用CSDN知识库
- js前端资源
- FUEL9编译指导
- STL源码——特殊的空间配置器
- linear-gradient 用法小结,不做渐变,做斜型背景。
- CodeIgniter(1)简单入门---使用mvc来完成对新闻的一组操作----增删改查
- i2cdetect i2cdump i2cget i2cset用法
- ES6 解析赋值
- C++ STL set集合容器常用用法
- javascript (function(){})()
- ssh三框架整合
- 安卓webwiew使用
- 服务器宕机记录16.12.14