gradient杂谈
工作中难免遇到某些小项目中没有设计的情况,这对于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杂谈的更多相关文章
- 兼容当前多浏览器的渐变颜色背景gradient的写法
经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的CSS,太低版本的浏览器只能使用图片做背景. 下面是当前五大浏览器对gradi ...
- 梯度下降(Gradient Descent)小结
在求解机器学习算法的模型参数,即无约束优化问题时,梯度下降(Gradient Descent)是最常采用的方法之一,另一种常用的方法是最小二乘法.这里就对梯度下降法做一个完整的总结. 1. 梯度 在微 ...
- CSS3中惊艳的gradient
以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...
- CSS3中border-radius、box-shadow与gradient那点事儿
一.border-radius border-radius用于添加圆角边框,用处非常广泛. 1)一个值,代表了四个角 .radius-one { /* Safari 3-4, iOS 1-3.2, A ...
- 机器学习基础——梯度下降法(Gradient Descent)
机器学习基础--梯度下降法(Gradient Descent) 看了coursea的机器学习课,知道了梯度下降法.一开始只是对其做了下简单的了解.随着内容的深入,发现梯度下降法在很多算法中都用的到,除 ...
- 【转】PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
原文地址: PHP 杂谈<重构-改善既有代码的设计>之一 重新组织你的函数 思维导图 点击下图,可以看大图. 介绍 我把我比较喜欢的和比较关注的地方写下来和大家分享.上次我写 ...
- CSS3 Gradient 渐变
转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...
- iOS 2D绘图 (Quartz2D)之阴影和渐变(shadow,Gradient)
原博地址:http://blog.csdn.net/hello_hwc/article/details/49507881 Shadow Shadow(阴影) 的目的是为了使UI更有立体感,如图 sha ...
- 线性回归、梯度下降(Linear Regression、Gradient Descent)
转载请注明出自BYRans博客:http://www.cnblogs.com/BYRans/ 实例 首先举个例子,假设我们有一个二手房交易记录的数据集,已知房屋面积.卧室数量和房屋的交易价格,如下表: ...
随机推荐
- Sql Server根据表名获得所有列及其属性
select a.name columnname,c.name as typename,case when a.is_nullable =0 then 'Not Null' else 'Null' e ...
- mysqlbinlog恢复数据
操作命令: 复制代码代码如下: show binlog events in 'mysql-bin.000016' limit 10; reset master 删除所有的二进制日志flush logs ...
- C#随机生成连续多少个十六进制数字
1.调用系统函数生成全球唯一标识 Guid.NewGuid().ToString(); 2.生成16组十六进制数 ,)+Guid.NewGuid().ToString().Substring(,)+G ...
- (原)python中import caffe提示no module named google.protobuf.internal
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5993405.html 之前在一台台式机上在python中使用import caffe时,没有出错.但是 ...
- 页面每次加载时重新获取css文件
<script> (function(){ var version=''; var xmlhttp; // code for IE7+, Firefox, Chrome, Opera, S ...
- phpwind 去除init.phpwind.net统计功能
修改的文件如下:global.phplib/staticpage.class.phprequire/template.phpsimple/index.php
- Android原理View、ViewGroup
Android的UI界面都是由View和ViewGroup及其派生类组合而成的.其中,View是所有UI组件的基类,而ViewGroup是容纳这些组件的容器,其本身也是从View派生出来的.Andro ...
- 设置WebSphere字符集参数
设置WebSphere字符集参数 1. 登陆was控制台 2. 依次点击服务器→服务器类型→应用服务器,显示应用程序服务器页面: 3. 选择并点击需要设置字符集的服务器,比如说本例中的server1 ...
- 一种针对虚拟机的应用软件License认证方法
由于虚拟机的硬件信息可以随意修改,使得虚拟机可能具有相同的硬件信息,在传统的应用软件License认证方式中会导致License认证漏洞.本专利提供了一种有效的解决方法. 文/王宏财 目 前,云计算的 ...
- 查询反模式 - 正视NULL值
一.提出问题 不可避免地,我们都数据库总有一些字段是没有值的.不管是插入一个不完整的行,还是有些列可以合法地拥有一些无效值.SQL 支持一个特殊的空值,就是NULL. 在很多时候,NULL值导致我们的 ...