css3之渐变背景色（linear-gradient）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3渐变背景色</title>
</head>
<!-- 背景颜色线性渐变【linear-gradient】
语法：
background:linear-gradient(起点，起点颜色，过度颜色【可选】，终点颜色)；
起点：top是从上到下，left是从左到右。如果定义成left top，那就是从左上角到右下角
过渡色：可以插入多个，表示多种颜色的渐变
--> <style> .linear-gradient{
width: 1000px;
margin:0 auto;
text-align: center } .linear-gradient p{
width: 100px;
height: 100px;
float: left;
border:1px #999 solid;
line-height: 100px;
margin-right: 100px;
font-size:20px;
}
.linear-gradient p:first-child{
background:-webkit-linear-gradient(top,#09f,#fff,#0c0);
}
.linear-gradient p:last-child{
background:-webkit-linear-gradient(20deg,#09f,#fff,#0c0);
}
</style>
<body>
<div class="linear-gradient">
<p>普通渐变</p>
<p>角度渐变</p>
</div>
</body>
</html>
css3之渐变背景色（linear-gradient）的更多相关文章
- CSS3－渐变背景色
线性渐变背景色: <style> .linear { width:130px; height:130px; border:2px solid black; padding: 10px; b ...
- 实用的CSS3－渐变背景色
线性渐变背景色: 第一个参数为渐变方式,后两个参数为起始点位置和终止点位置,后两个参数为起始颜色和终止颜色,后面那个参数为背景区域padding表示包含padding的区域,content表示 ...
- CSS3之渐变Gradient
渐变是CSS3中比较好玩的属性,学会了渐变,那么可以做出非常炫的东东哟.CSS3 中渐变——Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...
- CSS3之线性渐变（linear gradients）
线性渐变(linear gradients)沿着一根轴线改变颜色,从起点到终点颜色进行顺序渐变. 语法: background:linear-gradient(direction,color-stop ...
- CSS3 线性渐变（linear-gradient） 兼容IE8,IE9
一.线性渐变在 Mozilla 下的应用 语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...
- Android_1_渐变背景色
首先创建一个渐变背景色文件drawable-mdpi/bg_color.xml <?xml version="1.0" encoding="utf-8"? ...
- CSS3背景渐变。。。
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...
- 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
随机推荐
- 51nod1326 遥远的旅途（spfa+dp）
题意: 给出一个无向图,问从1到n是否存在一条长度为L的路径. n,m<=50,1<=路径长度<=10000,L<=10^18 思路: 改变一下思路,我们发现,假设从起点1走到 ...
- C#中怎样在ToolStripMenuItem下再添加子级菜单
场景 在右键菜单ContextMenuStrip下添加子菜单选项可以通过 ContextMenuStrip menuStrip ToolStripMenuItem mnuChartOption = n ...
- web服务器、Web中间件和Web容器的区别
web服务器>web中间件>web容器 Tomcat(servlet容器) 是 Tomcat中间件 也是 Tomcat服务器 看了谢公子的csdn文章,让我彻底分清了这三者的区别. ...
- Treats for the Cows POJ - 3186 dp 区间dp
//dp[i][j]表示第i次从左边取,第j次从右边取的价值,所以我们可以得到状态方程 //dp[i][j]=max(dp[i-1][j]+(i+j)*a[i],dp[i][j-1]+(i+j)*a[ ...
- POJ2528Mayor's posters 线段树，离散化技巧
题意:一个坐标轴从1~1e7,每次覆盖一个区间(li,ri),问最后可见区间有多少个(没有被其他区间挡住的) 线段树,按倒序考虑,贴上的地方记为1,每次看(li,ri)这个区间是否全是1,全是1就说明 ...
- [Agc001A/At1979] BBQ Easy - 贪心
要准备N组食物, 他有2N的食材, 需要两两组成一个食物, 食物的价值是两食材中较小的那个. 问最大总价值是多少 ---------- 考虑到\(ans = (sum - delta)/2\),只需要 ...
- Java面向对象--类和对象
面向对象是相对于面向过程而言的,是软件开发方法.面向对象把相关的数据和方法组织为一个整体来看待,从更高的层次来进行系统设计,更贴近事物的自然运行模式.本篇博客介绍Java面向对象的类和对象 目录: 面 ...
- JS全选按钮练习
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 计蒜客 - A1603.天上的星星
二维差分,理论上很简单,虽然我实际上做的时候一堆问题 1.边界的星星包含在内,需要在减去的时候往前挪一个 2.我是从0开始的,循环的时候非常不方便 3.x1, x2, y1, y2总是弄混 #incl ...
- CF399B Red and Blue Balls
题目 CF399B 洛谷RemoteJudge 思路 很容易发现,栈中靠上的蓝色球的出栈,对它下方的蓝色球没有影响. 举个例子: 第一步中靠上的蓝色球在第三步出栈了,这一过程对它下面的蓝色球(即第一步 ...