Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >css3 渐变 原

css3 渐变 原

作者头像
tianyawhl
发布于 2019-04-04 03:35:31
发布于 2019-04-04 03:35:31
1.1K00
代码可运行
举报
文章被收录于专栏:前端之攻略前端之攻略
运行总次数:0
代码可运行

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

CSS3 定义了两种类型的渐变(gradients):

  • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
  • 径向渐变(Radial Gradients)- 由它们的中心定义

浏览器支持情况,IE10及以上,Google26及以上 

语法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
background: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从上到下(默认情况下)

从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, blue); /* 标准的语法(必须放在最后) */
}

线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色,慢慢过渡到蓝色:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /* 标准的语法(必须放在最后) */
}

线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, red , blue); /* 标准的语法(必须放在最后) */
}

使用角度

如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。

语法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
background: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。

但是,请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准,即 0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度,y为非标准角度。

下面的实例演示了使用角度从下到上的渐变:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#grad1 {
    height: 100px;
    background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(0deg, red, blue); /* 标准的语法(必须放在最后) */
}

通过使用渐变制作进度条

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <div class="progress">
        <div class="progress-bar progress-bar-striped" style="width:60%">60%</div>
 </div>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
* {
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
    }

    .progress {
        margin: 100px auto;
        width: 80%;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
        border-radius: 4px;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        background-color: #f5f5f5;
    }

    .progress-bar {
        float: left;
        height: 100%;
        color: #fff;
        text-align: center;
        background-color: #5cb85c;
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    }

    .progress-bar-striped {
        border: 1px solid #ccc;
        background-image: linear-gradient(45deg, rgba(0, 0, 0, 1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
        background-size: 40px 40px;
    }

主要用到渐变的样式如下:

background-image: linear-gradient(45deg, rgba(0, 0, 0, 1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);         background-size: 40px 40px;

样式解释

1、rgba(255,255,255,.15) 25%:从左下角开始到25%都为rgba(255,255,255,.15),默认隐藏了起始点的设定 2、transparent 25%到transparent50%:从25%到50%的位置都是设置全透明的 3、rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%:50%到75%都是同一种颜色rgba(255, 255, 255, .15) 4、从75%到100%为transparent(透明),这里又省略了一个100%他是默认值 5、 这代码直接使用时没有什么效果的,他必须有背景颜色做衬托。如:background-color:#33CC99

如果加上动画效果

 .progress.active .progress-bar {         animation: progress-bar-stripes 2s linear infinite;     }     @keyframes progress-bar-stripes {         from {             background-position: 0 0         }         to {             background-position: 40px 0         }     }

如果不需要渐变如下的样式:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
background: linear-gradient(#fb3 33.3%, #58a 0);
background-size: 40px 40px;

如果不想要渐变效果,第二个颜色的位置小于等于第一个颜色的位置 ,同样适用于透明度

如果多个颜色块

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
background: linear-gradient(#fb3 50%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 40px 40px;

使用transparent 0(从0位置开始为透明的)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
background:linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0);
background-size: 40px 40px;

根据第二个颜色的位置小于等于第一个颜色的位置,不会产生渐变 ,所以0-50%是红色,50%-100%都是透明色,因为transparent 0  后面的0代表起始位置,比前面的颜色的位置50% 小。

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017/12/08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
《iOS UI 开发捷径 利用 Interface Builder 高效、优雅地开发 UI》 读书笔记第1章 Interface Bundle 概要第2章 使用 Interface Builder第3
第1章 Interface Bundle 概要 ---- Bundle 一种标准化的层次结构,保存了可执行代码及代码所需要的资源。 nib Next Interface Builder Interface Builder 的优点 开发和维护效率高 减少大量的 UI 代码和“胶水代码” 适配变得十分简单 IB 也可以做一些非 UI 的事情 利用 IB 学习控件可以达到事半功倍的效果 Interface Builder 的缺点 IB 的执行效率没有纯代码高 使用 IB 开发的过程中容易出现一些小问题 有一定的学
iOSDevLog
2018/05/17
2.6K0
设计模式之结构型模式(下)
上篇已经介绍了适配器模式、桥接模式和组合模式,这篇将介绍装饰者模式、外观模式、享元模式和代理模式。
Sheepy
2018/09/10
4120
iOS开发中 xib模块化设计
比如我们的xib名字为ZJUserPicView.xib 就必须建一个相同名字的类ZJUserPicView.swift并继承ZJXibView
码客说
2019/10/22
8700
Swift开发:自定义标签栏UITabBarController (Swift项目开始的第一步)
自定义UITabbarController进而自定义UITabbar,这通常会是一个iOS项目开始的重要环节。在Swift的学习过程中,个人感觉虽说两种语言的相似度很大,但是Swift依然在代码风格上
梧雨北辰
2018/04/24
4.7K0
Swift开发:自定义标签栏UITabBarController (Swift项目开始的第一步)
iOS开发之UICollectionViewCompositionalLayout
日常开发中最常用的控件莫过于 UITableView 和 UICollectionView,随着应用越来越复杂,以前的 UICollectionViewFlowLayout 布局已经满足不了需求,而自定义布局又过于复杂,所以在 iOS 13 中 Apple 为 UICollectionView 推出了组合布局 UICollectionViewCompositionalLayout,这对于 UICollectionView 是一个全新的升级,它将赋予 UICollectionView 更多的可能性。
YungFan
2020/06/16
2.9K0
手把手带你撸一个网易云音乐首页(三)
Hello, 大家好,今天准备和大家继续分享如何利用 Swift 来实现一个网易云音乐的首页;上俩篇文章文章发布以后,我收获了不少小伙伴的关注与点赞,同时也得到了一些非常有用的建议,在这里再次感谢大家的认可, 你们的鼓励与建议是我技术输出路上最大的动力。
HelloWorld杰少
2022/08/04
2.5K0
手把手带你撸一个网易云音乐首页(三)
Swift纯代码 UICollectionView 分组显示、Cell圆角、选中变色
上一篇介绍了如何使用swift纯代码构建UIColletionView,本篇继续介绍如何对其分组、设置分组标题、cell 圆角、选中变色。 效果图如下:
热心的程序员
2018/08/30
5.3K0
Swift纯代码 UICollectionView 分组显示、Cell圆角、选中变色
iOS 关于Interface Building 的一些小技巧
## 1. UIStackView StackView 是iOS9以后才有的,主要解决了组件排列布局复杂的问题,高效快速。
星宇大前端
2020/02/13
2K0
Swift-MVVM 简单演练(四)
Swift-MVVM 简单演练(一) Swift-MVVM 简单演练(二) Swift-MVVM 简单演练(三) 前言 这一篇主要写微博的首页布局,及MVVM模式的体会。像微博这种自定义的Cell布局略显复杂一些,我们最好将其拆分出来各个不同的模块来处理比较好一些。不要像之前那样,所有的控件都写在一个cell里面,那样不好处理。虽然说总体上来说,是学习MVVM模式,但是架构都是基于项目而设立的。脱离业务谈什么模式本身就不是很好。凡事有法,但法无定式。依个人习惯去延伸就好。没必要非得说谁的代码就一定是错的。这
用户1890628
2018/05/10
2.4K0
深入了解 iOS 的初始化
在 iOS 里面,无论是 Objective-C 还是 Swift,类(结构体、枚举)的初始化都有一定的规则要求,只不过在 Objective-C 中会比较宽松,如果不按照规则也不会报错,但会存在隐患,而在 Swift 则需要严格按照规则要求代码才能编译通过,极大提高了代码的安全性。
用户2932962
2019/12/11
1.1K0
IOS移动开发从入门到精通 视图UIView、层CALayer(1)
1个UIWindow 或 UIView 1、设置背景色 import UIKit class ViewController:UIViewController { override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view,typically from a nib. let view = UIView(frame:CGRect(x:40, y:80,width:240, height:240)) view.backgroundColor = UIColor.black view.clipsToBounds=true self.view.addSubview(view) } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } }
用户5760343
2019/07/05
8300
设计模式之创建型模式
GoF的《设计模式》一书总结了面向对象软件中一些宝贵的设计经验,系统地对它们命名、解释和评价,并以编目分类的形式将它们展现出来,这就是广为流传的23个设计模式的由来。
Sheepy
2018/09/10
7400
设计模式之创建型模式
教你写个多表视图
如图所示的多表视图是一个很常用的东西,之前我是用UIScrollView和UITableViewController做的。把当前的控制器作为一个父控制器,添加三个UITableViewController的实例作为子控制器,把父控制器中的 scrollView 作为容器,然后添加子控制器中的 tableView 作为子视图。这样做有一个问题,一旦有十几二十个表的话,内存就要爆炸了。解决的办法是可以自己写个重用机制,不过这显然没必要,用自带重用机制的UICollectionView应该是个更好的选择。
Sheepy
2018/09/10
1.5K0
教你写个多表视图
Swift日常开发随笔
提示:之所以为空白,是因为我把下拉列表中的tableView.reloadData()这行代码屏蔽掉了,加入的数组没有刷新。
编程怪才-凌雨画
2020/10/11
2.1K0
Swift-低仿搜狐新闻标签页效果
前言:先看下效果 Tips: 这是用Swfit写的一个小Demo,用UICollectionView实现的拖拽排序,点击排序的效果。 我所用的UICollectionView的排序方法是系统默认
用户1890628
2018/05/10
2K0
怎么让继承的类直接使用XIB的布局试图
最近做的一个小工具,一键替换key,就是为了解放双手,不然每次运行测试和正式的版本都要手动的替换key。
君赏
2018/08/31
1.2K0
怎么让继承的类直接使用XIB的布局试图
UIView不可不知的秘密
前言: 1、在Mac OS中NSWindow的父类是NSResponder,而在iOS中UIWindow的父类是UIView。程序一般只有一个窗口但是会又很多视图。 2、UIView的作用:描画和动画,视图负责对其所属的矩形区域描画、布局和子视图管理、事件处理、可以接收触摸事件、事件信息的载体等等。 我在前面详细介绍了setNeedsDisplay , setNeedsLayout和layoutIfNeeded 详情请点击。 下面介绍的是view添加以及删除时所触发的方法 // 当视图添加子视图
Dwyane
2018/05/22
1.8K0
Swift 类构造器的使用
个人觉得这句话还是蛮有道理的. 反正对于我来说, 每过一段的时间回过头来看自己写的代码都感觉有很大的重构空间, 很多地方写的不够 PERFECT, 虽然我不是一个处女座, 但是对于代码的健壮和整洁还是很注意的.
ios-lan
2020/09/27
1.9K0
Swift 探索 UICollectionView 之 SupplementaryView 和 Decoration View
大家早上好,又到了每周和大家分享开发心得的时间啦!上周我分享了一篇关于 UICollectionView 自定义布局实现 Cover Flow 的文章(文章直通车),这也是我分享的关于 UICollectionView 系列的第四篇文章了,那今天我还是继续给大家带来 UICollectionView 开发系列的第五篇,这也是该系列计划写的最后一篇啦!当然,如果苹果开发者团队推出了关于 UICollectionView 的新的技术或者是我在开发中发现了新的技术点,我还是会持续更新这个系列,最终的目的是我希望通过这个系列的文章能把 UICollectionView 这个控件的核心技术点汇总齐全,毕竟 UICollectionView 使用的范围太广泛了。
HelloWorld杰少
2022/08/04
2.4K0
Swift  探索 UICollectionView 之 SupplementaryView 和 Decoration View
给UICollectionView设置组背景和组圆角-Swift
最近由于我们的UI设计钟情于圆角搞得我很方,各种圆角渐变,于是就有了下面这篇给UICollectionView的组设置圆角和背景色的一个小封装,拿出来和大家分享一下,里面的具体的一下细节都在代码注释里面,大家留意下代码注释就好。我们理一下大致的一个思路。
Mr.RisingSun
2020/06/19
3.8K2
推荐阅读
相关推荐
《iOS UI 开发捷径 利用 Interface Builder 高效、优雅地开发 UI》 读书笔记第1章 Interface Bundle 概要第2章 使用 Interface Builder第3
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验