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/ 实例 首先举个例子,假设我们有一个二手房交易记录的数据集,已知房屋面积.卧室数量和房屋的交易价格,如下表: ...
随机推荐
- css-盒模型,浮动,定位之间的关系
网站布局属性:盒模型:调整元素间距float浮动:竖排的块级元素改成横排position定位:重叠元素,精确控制元素位置 能用盒模型,不用float,能用浮动,不用定位
- n!mod p的求法
我们假设p为素数,n!=a*pe,则我们需要求解a mod p和e. e是n!能够迭代整除p的次数,因此可以使用下面式子计算: n/p+n/p2+n/p3…… 我们只需要对pt≤n的t进行计算所以复杂 ...
- myeclipse 不能添加非myeclipse开发的项目
这是因为以前的项目不是用myEclipse创建的,所以用myeclipse deploy的时候找不到你的项目.可以这样做:右击原项目名 - myeclipse - Add Web Project Ca ...
- Bootstrap学习笔记(未整理)
强调class 这些class通过颜色来表示强调.也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式. <p class="text-muted"> ...
- Jquery各版本下载,附Jquery官网下载方法
jQuery version 2.1.1 http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js http://ajax.aspnetcdn.com ...
- 距离顶部估计像素,显示div!
<html> <head> <title>slide</title> <style type="text/css"> # ...
- python学习(四)五数连珠
中午有段时间,模仿<五子连珠>写了一段代码,运行截图如下: import random # for random.randrange() import os # for input() b ...
- 基于cygwin构建u-boot(五)结尾:shell 工具
结尾,基于cygwin对u-boot的处理,很大一部分都是再处理 路径等相关的问题,只有一个涉及到gcc的参数配置. 为了达到顺利编译的目的,使用shell下的部分工具进行处理. 1.sed sed简 ...
- AFNetworking实现 断点续传
用AFNetworking实现断点续传,暂停,继续 AFNetworking断点续传暂停恢复 AFNetworking的版本:platform:ios,'7.0' pod "AFNetw ...
- Autolayout-VFL语言添加约束-备
一.VFL语言简介 VFL(Visual format language)语言是苹果为了简化手写Autolayout代码所创建的专门负责编写约束的代码.为我们简化了许多代码量. 二.使用步骤 使用步骤 ...