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/ 实例 首先举个例子,假设我们有一个二手房交易记录的数据集,已知房屋面积.卧室数量和房屋的交易价格,如下表: ...
随机推荐
- Android-----------打开手机上的应用
##判断手机上是否存在应用,存在则打开 package com.funs.openApp.utils; import java.util.List; import android.c ...
- 512M内存机器如何用好Mysql
购买阿里云512M内存ECS后,mysql有时候会自动关闭,停止运行 解决办法: a,优化mysql配置,因为自己安装的是mysql 5.6,而从5.6开始,mysql安装包中不再包含my-small ...
- 清除大文本中的html标签
public String clearHtmlText(String inputString) { if (StringUtils.isBlank(inputString)) { return &qu ...
- POJ1459 最大网络流
问题: POJ1459 涉及内容:最大网络流 分析: 本题问题看似非常复杂,实际上可以转化为单源点单汇点的最大网络流问题. 1)因为电量只在发电站产生,故增加源点S,构建从S到每个发电站的有向边,边的 ...
- [0] Tornado Todo 开篇
参考自: python: tornado例子 Github地址:tornado_todo 开发环境: Python包的安装: 首先安装 pip: sudo apt-get install python ...
- ffmpeg编译时freetype2 not found错误
自己安装的libfreetype2在/usr/local/lib目录下export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig:$PKG_CONFIG_PATH
- Blogger支持Mobile行动版网页 - Blog透视镜
目前几乎人人都使用行动装置像是Pad,智能型手机等,而Blogger也针对此类的使用者,推出支持Mobile行动版网页,提供简单清爽的页面,方便在小屏幕上的阅读,在设定上也相当的简单,同时还可以在计算 ...
- Ubuntu mysql中文乱码解决
#vim /etc/mysql/my.cnf 找到[mysqld]添加 character-set-server = utf8 重启mysql #restart mysql mysql> sho ...
- 继承Object和ContextBoundObject处理效率上的差距
继承Object和ContextBoundObject处理效率上的差距 ContextBoundObject一个很熟悉的对象,它提供对象有处理上下文的能力:通过它能够方便地实现AOP处理机制.它带来好 ...
- linux下ifconfig, DNS以及route配置
转载:http://blog.csdn.net/wangjingfei/article/details/5283632/ 熟悉使用ifconfig 会非常方便. ifconfig eth0 新ip 然 ...