CSS基础知识真难啊-background-渐变
文章参考
http://www.zhangxinxu.com/wordpress/?p=727
http://www.uqu8.com/html/2014/html-css_1105/176.html
background: -moz-linear-gradient(top, blue, white);//-webkit-linear-gradient(top, blue, white)谷歌
线性渐变,逆时针方向,-moz-火狐浏览器,top为方向,blue为起点颜色,white为结束颜色
从top开始从left开始
linear-gradient(blue, white);
linear-gradient(top, blue, white);
linear-gradient(bottom, white, blue);
linear-gradient(-90deg, white, blue);
以上四种方式都能实现左图
background: -moz-linear-gradient(left top, blue, white);//谷歌改前缀
从左上角开始
background: -moz-linear-gradient(left center, black, white);
background: -moz-linear-gradient(left 20deg, black, white);
从left/left_center开始从left_20°开始
left_0°=========left_20°=========left_30°=========left_50°=========left_70°=========left_90°
0°==20°==30°==50°==70°==90°
如果没有指定位置,颜色会均匀分布
第一张图写法为background: -moz-linear-gradient(left, black 80%, white);
第二张图写法为background: -moz-linear-gradient(left, black, white 80%);
第三张图写法为background: -moz-linear-gradient(left, white 80%, black);
---------------------------------透明度---------------------------------------------
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://p0.so.qhimg.com/bdr/_240_/t010f1e95f5a2025c85.jpg);
background: -moz-linear-gradient(right, rgba(255,0,0,0.4), rgba(255,255,255,1)),url(http://p0.so.qhimg.com/bdr/_240_/t010f1e95f5a2025c85.jpg);
background: -moz-linear-gradient(left, rgba(255,0,0,0.4), rgba(255,255,255,1)),url(http://p0.so.qhimg.com/bdr/_240_/t010f1e95f5a2025c85.jpg);
rgba(r,g,b,a)==>a表示不透明度,透明度越大,作用对象越清楚
rgba(255,255,255,0)表示颜色(255,255,255)的白色,0表示白色的遮盖层本身不透明度为0即很透明
rgba(255,255,255,1)表示颜色(255,255,255)的白色,1表示白色的遮盖层本身不透明度为1即很不透明
(好像有点绕,我把它理解为0表示否,否定不透明度中的“不透明”这几个字,1表示是,肯定不透明度中的“不透明”这几个字)
left和right表示startColor到endColor的方向
---------------------------------径向渐变之颜色---------------------------------------------
background: -moz-radial-gradient(red, yellow, #1E90FF);
background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 70%);
下面的圆具有相同的起止颜色,但在左边的为默认的颜色间隔均匀的渐变,而右边的每种颜色都有特定的位置。
---------------------------------径向渐变之形状-----------------------------------------------
background: -moz-radial-gradient(bottom left, circle, red, yellow, #1E90FF);
background: -moz-radial-gradient(bottom left, ellipse, red, yellow, #1E90FF);
一个圆(左侧)和椭圆(右侧)bottom left和left bottom都可以表示左下角
---------------------------------径向渐变之大小-----------------------------------------------
size的不同选项(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用来定义圆或椭圆大小的点
大小(最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover))
---近边和远角--
background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
左边的一个是近边:从起始点(center)到近边的距离,而右边的一个是远角:从起始点到远角的的距离。
(图片来自网络)
---近边和远边--
background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
background: -moz-radial-gradient(circle farthest-side, red, yellow 10%, #1E90FF 50%, white);
左边的圆的渐变半径:起始点(center)到近边的距离,而右边的圆的渐变半径:起始点到远边的距离。
CSS基础知识真难啊-background-渐变的更多相关文章
- CSS基础知识真难啊-浮动
无浮动 <ul style="width: 440px;"> <li id="myli" style="border: 4px so ...
- CSS基础知识真难啊
CSS层叠样式表Cascading Style Sheets CSS派生选择器(上下文选择器): 后代选择器:h1 strong {color:red;}第一个参数和第二个参数之间的代数是可以无限的 ...
- CSS基础知识真难啊-font
不吐不快啊!!!! 上午测试还好好的,下午再写一次准备发出来就出错了!! 传说中程序媛三大错觉:我肯定没错,刚才还好好的,一定是有人改了我代码.. 我的口头禅都快变成“刚刚还好好的”了! 事情是这样的 ...
- CSS基础知识真难啊-position-relative-absolute
http://blog.csdn.net/libertea/article/details/11662661 -----------position:relative:生成相对定位的元素,相对于其正常 ...
- CSS基础知识筑基
01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- CSS基础知识之float
前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...
- (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...
随机推荐
- Shell高级编程视频教程-跟着老男孩一步步学习Shell高级编程实战视频教程
Shell高级编程视频教程-跟着老男孩一步步学习Shell高级编程实战视频教程 教程简介: 本教程共71节,主要介绍了shell的相关知识教程,如shell编程需要的基础知识储备.shell脚本概念介 ...
- TensorFlow 源代码初读感受
把自己微博发的文章:http://www.weibo.com/1804230372/En7PdlgLb?from=page_1005051804230372_profile&wvr=6& ...
- 如何批量删除虚拟机及其关联的存储(Windows Azure)
可以通过运行附件中PowerShell脚本文件RemoveVMandDisk.ps1批量删除VM和Disk,详细代码如下: param($serviceName) echo "Startin ...
- Http协议中的Content-Length属性
Android开发的时候需要与从服务器上获取数据,数据是通过http协议封装的.Android端使用的是Xutils第三方插件来发起http请求,但是每次只能拿到部分数据.通过仔细分析后原来是Cont ...
- windows 内部预览版与迅雷极速版不配合
为了体验bash on ubuntu安装的预览版本,结果原来的迅雷极速版本无法成功下载文件,总是在最后一刻报错退出. 解决方法是: 下载安装迅雷9 哈哈哈哈,新版迅雷挺不错的,运行良好. ctrl^v ...
- dmesg 显示内核消息
显示内核消息 dmesg [options] dmesg 可以用来显示存储在内核环缓冲区中的消息 系统启动时,内核会用硬件和模块初始化的相关消息填充其环缓冲区.内核环缓冲区中的消息常常用于诊断系统问题 ...
- 在nginx中配置如何防止直接用ip访问服务器web server及server_name特性讲解
看了很多nginx的配置,好像都忽略了ip直接访问web的问题,不利于SEO优化,所以我们希望可以避免直接用IP访问网站,而是域名访问,具体怎么做呢,看下面. 官方文档中提供的方法: If you d ...
- my-Life项目开发流程
一:新建java web项目 (懂得使用gradle哦!) 1.http://www.cnblogs.com/xylle/p/5234380.html 2.新建项目后,然后新建module, 如果甲 ...
- less sass学习总结(——待续哦——)
一:less.sass是为了解决什么? 为什么要让css以编程语言来书写呢?
- 路由知识之ip route 命令中的疑惑
1.基础知识 1.1 路由 (Routing) 1.1.1 路由策略 (使用 ip rule 命令操作路由策略数据库) 基于策略的路由比传统路由在功能上更强大,使用更灵活,它使网络管理员不仅能够根据目 ...