线性渐变背景色:
 
 
第一个参数为渐变方式,后两个参数为起始点位置和终止点位置,后两个参数为起始颜色和终止颜色,后面那个参数为背景区域padding表示包含padding的区域,content表示不包含content的区域,最后那个参数为背景的实际使用区域,可以为content或padding。
线性渐变的另一种简化写法
 
放射性渐变:
 
 
radial之后的四个数字分别是起始点坐标,起始圆半径,终止点坐标,终止圆半径。to的颜色最后都变成了完全透明,否则的话不会受到终止圆范围的限制。color-stop可以有多个,用来调整渐变途径中的颜色。
此外,可以通过-webkit-background-size: 20px 50px;指定一块背景区域的长,高,或-webkit-background-size: 20px;同时指定长和高,来指定
一个背景区域的大小。这样可以实现平铺的效果等。
放射性渐变的另一种写法:
safari对渐变的实现默认并不是圆形,而是上面那样根据div的大小变化的椭圆形,但是chrome的实现是圆形。如果safari要实现标准的圆形,可改为(circle,white,black).
放射性边框图片:
-webkit-border-image: -webkit-radial-gradient(white,red) 100%;
方式性渐变图片作为蒙板(实现文字现实区域跟随鼠标移动而变化):
 
#c{
    background:white;
 -webkit-mask-box-image: -webkit-radial-gradient(50% 50%, white, transparent 80px);
}
require('jquery.js');
var div=$('#c');
div.mousemove(function(e){
div.css("-webkit-mask-box-image","-webkit-radial-gradient("+e.offsetX+"px "+e.offsetY+"px, white, transparent 80px)");
});
 

实用的CSS3-渐变背景色的更多相关文章

  1. css3之渐变背景色(linear-gradient)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS3-渐变背景色

    线性渐变背景色: <style> .linear { width:130px; height:130px; border:2px solid black; padding: 10px; b ...

  3. 8款超酷而实用的CSS3按钮动画

    1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

  4. 实用的CSS3属性和使用技巧

    CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...

  5. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  6. css3渐变(Gradients)

    <html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...

  7. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  8. 8款超酷实用的CSS3 Tab菜单集合

    1.CSS3华丽的Tab菜单 带小图标动画 之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG Tab滑块菜单,结合SVG,Tab菜单实现非常灵活.今天我们要再来分享一款基于CSS3的 ...

  9. css3 渐变记

    css3 渐变 线性渐变 径向渐变 重复线性渐变 重复径向渐变 线性渐变 线性渐变接受三个参数,渐变的方向,起始颜色,结束颜色. 标准语法及参数:linear-gradient:([[<angl ...

随机推荐

  1. 06、python的基础-->编码小知识

    1.编码类型ascii A : 00000010 8位 一个字节 unicode A : 00000000 00000001 00000010 00000100 32位 四个字节 中:00000000 ...

  2. python之正则表达式【re】

    在处理字符串时,经常会有查找符合某些规则的字符串的需求.正则表达式就是用于藐视这些规则的工具.换句话说,正则表达式是记录文本规则的代码. 1.行定位符. 行定位符就是用来表示字符串的边界,“^”表示开 ...

  3. python基础【第九篇】

    补充知识 1.字符串方法的补充 s = str() s.format() # 格式化输出 "连接符".join("连接的对象") # 拼接 s.find() # ...

  4. Java-技术专区-问题专区-应该了解的基础技术点

    Java基础 Arrays.sort实现原理和Collection实现原理 foreach和while的区别(编译之后) 线程池的种类,区别和使用场景 分析线程池的实现原理和线程的调度过程 线程池如何 ...

  5. filter-method 在elementUI 表格中的使用

    <el-table-column prop="pubArea" // 表格data 中对应的字段 column-key="pubArea" // 过滤条件 ...

  6. 浅析php-fpm和fastcgi的关系

    先讲讲CGI吧 浏览器向web server发起请求的时候,要有url,header,params等等吧,为什么有这些数据呢,这就是CGI的事了,CGI就规定了,传哪些数据,用什么样的格式传输 web ...

  7. js函数方法

    /** * call()和apply * 这两个方法都是函数对象的方法,需要通过函数对象来调用 * 当对函数调用call()和apply()都会调用函数执行 * 在调用call()和apply()可以 ...

  8. 微信小程序の页面路由

    微信小程序的页面路由由平台已栈的形式管理. 微信小程序的页面为什么会如此特殊呢,因为可视区域始终只有一个页面. 一.小程序页面的路由方式 小程序页面有6种路由方式:初始化.打开新页面.页面重定向.页面 ...

  9. 【Nacos】本地集群部署

    关于Nacos已经展开了四篇入门文章: 初探Nacos(一)-- 单机模式启动 初探Nacos(二)-- SpringCloud使用Nacos的服务注册与发现 初探Nacos(三)-- SpringB ...

  10. Robot Framework:日志输出中文Unicode编码

    robotframework 输出日志时,中文显示为Unicode编码 . 修改方法: 在Python27\Lib\site-packages\robotframework-3.0.4-py2.7.e ...