- 浏览: 1090585 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
CSS 的 linear-gradient() 函数会创建一个线性渐变色的 IMAGE 图象。
该函数返回的对象的 CSS 数据类型为:gradient。
线性渐变图像本身没有固定的大小,而是跟元素的大小相匹配。
线性渐变图像定义时使用:轴、渐变线。
轴:渐变线由含渐变图像框中心的角度定义。
颜色:渐变的颜色是由不同的点定义,起点,终点。中间可以加颜色点。
起始点:
是渐变线上颜色最先开始的点。
它是由梯度线和垂直通过在同一象限的框角之间的交点定义。
同样,
结束点:
是渐变线的颜色最终抵达的点。
它也可以通过渐变线和附近的角落发出的垂直线的交点定义。
但更容易定义为出发点的对称,当反射点与原点的带框的中心混淆。
这些出发点和结束点的一些复杂的定义引出了一个有趣的属性,
有时称为魔角:起始点和结束点附近的角落也有相同的颜色作为各自的开始和结束点。
颜色停止点:
不仅仅是起始点和结束点可以指定颜色。
通过对渐变线定义额外的颜色停止点,
Web开发人员可以创建一个自定义过渡的开始和结束之间的颜色,或提供一个多色渐变。
线性渐变语法不允许重复(repeat),但通过使用颜色停止点,同样可以达到效果。
颜色停止点的位置:
被隐式定义(未指定)时,它被放置在它前面的点和后面的点之间的中间位置。
该位置还可以通过使用 length 或 “%” CSS数据类型来显式定义。
有时我们不希望从开始点渐变,则加一个同样颜色的颜色停止点即可。
例如,从60%处开始渐变:
background: linear-gradient(135deg, red, red 60%, blue);
这种情况下,可以省略第一个颜色(效果同上):
background: linear-gradient(135deg, red 60%, blue);
-
下面是实现了部分进度条样式的CSS:
<!DOCTYPE html> <html> <head> <style> #grad1{ height: 200px; width: 100%; background-size: 100px 100px; background-repeat: no-repeat; background-color: #5A88B7; background-image: linear-gradient( 0deg, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5) 25%, transparent 25%, transparent 50%, rgba(0, 255, 0, 0.3) 50%, rgba(0, 255, 0, 0.3) 75%, transparent 75%, transparent ); } </style> </head> <body> <div id="grad1"></div> </body> </html>
效果图:
让横线斜起来:
<!DOCTYPE html> <html> <head> <style> #grad1{ height: 200px; width: 100%; background-size: 100px 100px; background-repeat: no-repeat; background-color: #5A88B7; background-image: linear-gradient( -45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent ); } </style> </head> <body> <div id="grad1"></div> </body> </html>
效果图:
使背景图片填满元素:
background-repeat: repeat;
代码:
<!DOCTYPE html> <html> <head> <style> #grad1{ height: 200px; width: 100%; background-size: 100px 100px; background-repeat: repeat; background-color: #5A88B7; background-image: linear-gradient( -45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent ); } </style> </head> <body> <div id="grad1"></div> </body> </html>
效果图:
当然,要实现滚动效果,还需要加上JavaScript,让背景图移动。
让整个图片背景动起来。看起来象加载一样。
浏览器兼容:
.grad { background-color: #F07575; /* fallback color if gradients are not supported */ background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */ background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */ background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */ }
-
引用请注明,
原文出处:http://lixh1986.iteye.com/blog/2376395
-
参考:
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
测试:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_ltr
-
发表评论
-
Flex之 justify-content 和 flex-direction 的应用
2021-12-23 19:39 294flex 简介: 采用Flex布局的元素,被称为Flex容 ... -
CSS之页面元素飞入效果
2020-04-18 17:50 663效果预览: - https://www.runoob.com ... -
CSS之垂直居中
2020-04-02 10:00 335css里面用text-align:center ... -
Sass之&引用父选择器
2018-08-08 11:29 8234Sass之&引用父选择器 描述: 您可以使用&字符选 ... -
HTML5之canvas之粒子效果
2018-01-26 10:32 1430效果图: JavaScript 代码实现: & ... -
CSS之导航栏设计之 ul 之 li 标签排成一行
2019-06-04 11:11 2290在HTML页面元素设计中, 把具有相同一类功能的列表用 li ... -
HTML5/CSS3鼠标滑过图片滤镜动画效果
2017-12-21 10:54 1281HTML5/CSS3鼠标滑过图片滤镜动画效果 以前我们用CS ... -
CSS之提示框实现
2017-08-02 05:08 1921效果图: 注意以下要点: 1、提示框的箭头效果,且箭头 ... -
Responsive Web Design(自响应式网页设计)
2017-05-28 22:43 1195Responsive Web Design(自响 ... -
在 css 中使用 @font-face
2017-05-24 14:15 514@font-face 允许用户使用自定义的字体。在css中定义 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 616Jquery mouseenter() vs mouseove ... -
css:flex布局
2017-03-13 17:43 852A Complete Guide to Flexbox htt ... -
网站页面配色
2017-01-05 10:12 648导航栏,菜单栏 左侧菜单 导航,底部,选择列表 ... -
BootstrapCSS之Select
2016-10-18 17:00 1034效果图: 代码: <!-- Inclu ... -
CSS样式之带边框的 Anchor(超链接)
2016-10-08 15:19 2863效果图: HTML: <a c ... -
bootstrap css之响应式导航栏
2016-08-29 16:58 16715- 使用 Twitter Bootstrap 3 创建响应式导 ... -
CSS之 white-space : pre
2016-06-15 10:21 937在 github 的代码浏览页面,可以看到这样的 css 样式 ... -
CSS - li 元素显示在一行____ a 元素没有下横线
2016-05-27 20:44 2171原文链接: http://www.w3schools.com/ ... -
CSS - table 圆角 border radius
2016-04-29 12:08 4530效果: 代码: <!DOCTYPE htm ... -
[css - hr ] border color 横线高度和颜色
2016-04-28 10:59 3685如果设定 hr 的 border,会发现其高度会比不设置高2倍 ...
相关推荐
react-native-web-linear-gradient 用于Web实现React-native-linear-gradient的React Native 入门 $ npm install react-native-web-linear-gradient --save 别名打包您的webpack配置中: resolve: { alias: { ...
LinearGradient 组件 react-native-linear-gradient ,react-native-linear-gradient 是一个 React Native 的 Li...
下面小编就为大家带来一篇深入剖析CSS中的线性渐变linear-gradient。小编觉得挺不错的,现在分享给大家,也给大家做个参考
linear-gradient给图片加蒙层方法
1.linear-gradient是CSS3中新增的样式,主要用于颜色的渐变效果。 2.linear-gradient在不同内核下使用方式不同。 实用栗子(在Chrome下) 1.缺角效果 先看效果图 这是内容 .div1 { width: 100px; height: 40...
CSS repeating-linear-gradient 方法 创造一个可重复的渐变。它接受和普通线性渐变相同的属性值并且表现也一致。 但它会自动在延伸的方向上重复 color stops。每段起始和结束的 color stop 之间是一个基本的...
线性渐变( linear-gradient ) background-image: linear-gradient(to 方向, 开始颜色, 中间颜色1, 中间颜色2, ... , 结束颜色 ); 四个方向的组合-八个方向 top, right, bottom, left 角度 90deg 径向渐变( radial-...
前端开源库-postcss-filter-gradientpostss过滤器渐变,postss插件用于生成旧的IE支持的过滤器渐变。
安装 npm i react-linear-gradient-picker渐变选择器的使用 import React , { useState } from 'react' ;import { Panel as ColorPicker } from 'rc-color-picker' ;import { GradientPicker } from 'react-linear-...
所以用上个方法联想到了线性渐变(linear-gradient) CSS Code复制内容到剪贴板 .line li{ border: none; background-image: -webkit-linear-gradient(#222 50%,transparent 50%); background-i
yarn add react-native-linear-gradient 使用npm npm install react-native-linear-gradient --save 使用React Native> = 0.60 运行npx pod-install 链接(仅适用于React Native <= 0.59) 注意:如果您使用...
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核...
传统的实现方式是通过图片来实现+-按钮,而本文却将使用CSS3的linear-gradient线性渐变来实现购物车的加减操作。 要实现一个减号效果非常简单,例如要实现一个10px*2px的减号图形,则CSS: .minus { background-...
npm install tailwindcss-border-gradient-radius yarn add tailwindcss-border-gradient-radius 用法 简单的 { theme : { linearBorderGradients : theme => ( { colors : theme ( 'colors' ) , background :...
现行渐变首先看下示例(1)垂直渐变 (2)垂直渐变 IE系列 filter: progid:DXImageTransform.Microsoft.Gradient...Firefox background: -moz-linear-gradient(top, #FF0000, #F9F900); 参数:top、bottom垂直,left、r
纯css3 gradient属性制作6种渐变色的按钮样式
react-native-linear-gradient包含css渐变支持