工作中难免遇到某些小项目中没有设计的情况,这对于PS基础薄弱的我来说非常恐怖。无奈之下,只好自己自学UI方面的知识,但对于某些能用CSS实现的背景样式等,还是尽可能地用已经掌握的知识去实现。本文主要分享的便是我在设计背景图片中接触到最多的也是之前自己忽视掉的一个CSS3属性——gradient。

  1、linear-gradient线性渐变。其基础的使用格式为: background: linear-gradient(red,black); 实现样式如下:

                                               

  可以在参数中加上渐变方向,如 background-image: linear-gradient(to right,red,black); ,实现样式如下:

  渐变方向也可以使用角度值,如 background-image: linear-gradient(45deg,red,black);

  多种背景颜色渐变,如: background-image: linear-gradient(to right,red,yellow,black);

  设置背景颜色开始坐标,如: background-image: linear-gradient(to right,red,yellow 25%,black 50%);

  无渐变, background-image: linear-gradient(to right,red 25%,yellow 25%,yellow 50%,black 50%,black 100%);

  2、radial-gradient径向渐变。基础使用格式: background-image: radial-gradient(red,black);

  带参数的径向渐变,如: background-image: radial-gradient(circle at top left,red,black);

  3、组合使用,如条纹背景:

background-color: red;
background:
linear-gradient(90deg,blue 15px,transparent 0),
linear-gradient(90deg,black 30px,transparent 0),
linear-gradient(90deg,yellow 45px,transparent 0);
background-size: 45px;

  先输入的渐变属性层级较高,故使用transparent让后续使用的属性显示。

  黑白砖块,

background-color: #fff;
background-image:
linear-gradient(45deg,#000 7px,transparent 0),
linear-gradient(45deg,#000 7px,transparent 0),
linear-gradient(225deg,#000 7px,transparent 0),
linear-gradient(225deg,#000 7px,transparent 0);
background-size:20px;
background-position: 0 0 ,10px 9px,20px 18px,10px 9px;

  4、两个新的属性: repeating-linear-gradient 以及 repeating-radial-gradient

  

.repeat-linear{
background:
repeating-linear-gradient(red,black 5%);
}
.repeat-radial{
background:
repeating-radial-gradient(red,black 5%);
}

    以上所有代码实现均使用高级浏览器,兼容性问题,请自行百度。

gradient杂谈的更多相关文章

  1. 兼容当前多浏览器的渐变颜色背景gradient的写法

    经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的CSS,太低版本的浏览器只能使用图片做背景. 下面是当前五大浏览器对gradi ...

  2. 梯度下降(Gradient Descent)小结

    在求解机器学习算法的模型参数,即无约束优化问题时,梯度下降(Gradient Descent)是最常采用的方法之一,另一种常用的方法是最小二乘法.这里就对梯度下降法做一个完整的总结. 1. 梯度 在微 ...

  3. CSS3中惊艳的gradient

    以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...

  4. CSS3中border-radius、box-shadow与gradient那点事儿

    一.border-radius border-radius用于添加圆角边框,用处非常广泛. 1)一个值,代表了四个角 .radius-one { /* Safari 3-4, iOS 1-3.2, A ...

  5. 机器学习基础——梯度下降法(Gradient Descent)

    机器学习基础--梯度下降法(Gradient Descent) 看了coursea的机器学习课,知道了梯度下降法.一开始只是对其做了下简单的了解.随着内容的深入,发现梯度下降法在很多算法中都用的到,除 ...

  6. 【转】PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数

    原文地址: PHP 杂谈<重构-改善既有代码的设计>之一 重新组织你的函数 思维导图   点击下图,可以看大图.    介绍   我把我比较喜欢的和比较关注的地方写下来和大家分享.上次我写 ...

  7. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  8. iOS 2D绘图 (Quartz2D)之阴影和渐变(shadow,Gradient)

    原博地址:http://blog.csdn.net/hello_hwc/article/details/49507881 Shadow Shadow(阴影) 的目的是为了使UI更有立体感,如图 sha ...

  9. 线性回归、梯度下降(Linear Regression、Gradient Descent)

    转载请注明出自BYRans博客:http://www.cnblogs.com/BYRans/ 实例 首先举个例子,假设我们有一个二手房交易记录的数据集,已知房屋面积.卧室数量和房屋的交易价格,如下表: ...

随机推荐

  1. c#、vb 自动属性

    vb示例: Public Property Name() As String = "Bob" 等效于 Private _name As String = "Bob&quo ...

  2. css实现两端对齐~

    今天做表单时遇到让上下两个字段对齐的情况,手机号码.用户名. 然后今天在网上找了找相关方法,发现确实是没有什么好的方法解决,特别是当需要兼容的时候.找到了两个我觉得相对还不错的方法: 方法一.是在司徒 ...

  3. EF中的连接字符串

    映射视图是每个实体集和关联的映射中指定的可转换的可执行表示. 包括两部分: 查询视图 表示从数据库架构转到概念架构所需的规范装换 更新视图 表示从概念模型转到数据库架构所需的规范转换 如果应用程序仅用 ...

  4. WebApi2官网学习记录---异常处理

    HttpResponseException 当WebAPI的控制器抛出一个未捕获的异常时,默认情况下,大多数异常被转为status code为500的http response即服务端错误. Http ...

  5. C#中的表达式树的浅解

    表达式树可以说是Linq的核心之一,为什么是Linq的核心之一呢?因为表达式树使得c#不再是仅仅能编译成IL,我们可以通过c#生成一个表达式树,将结果作为一个中间格式,在将其转换成目标平台上的本机语言 ...

  6. VC++ try catch (转)

    VC++ try catch (转)   以前都是用try{} catch(-){}来捕获C++中一些意想不到的异常, 今天看了Winhack的帖子才知道,这种方法在VC中其实是靠不住的.例如下面的代 ...

  7. 3、HelloKhala示例说明

    最简单的dome程序只需3行代码 int main() { //设置端口号 InetAddress listenAddr(USER_PORT); //将端口号绑定到Server NodeServer ...

  8. hdu5353 Average(模拟)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Average Time Limit: 4000/2000 MS (Java/Ot ...

  9. LeetCode_N-Queens

    The n-queens puzzle is the problem of placing n queens on an n�n chessboard such that no two queens ...

  10. Qt编程之实现在QFileDialog上添加自定义的widget

    上网搜索找到的方法如下: http://www.qtforum.org/article/20841/how-to-add-a-qwidget-in-qfiledialog.html#post78422 ...