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骨架中,可以用 ...
随机推荐
- python3练习100题——045
题目:统计 1 到 100 之和. sum(range(1,101)) 题目太容易了,我都不想用迭代浪费时间. 觉得这100道题难度设计越来越不合理.
- 解决苹果手机app store下载软件超过200M后必须使用wifi的终极方法（亲测有效）
前言 最近使用苹果手机下载一款大小为300M左右的软件时弹出如下提示 因为平时主要使用wifi下载,偶尔用自己的流量也没有超过200M,所以用了这么久才发现苹果手机有这样一个限制. 这让我有些郁闷 ...
- 859. Kruskal算法求最小生成树（模板）
给定一个n个点m条边的无向图,图中可能存在重边和自环,边权可能为负数. 求最小生成树的树边权重之和,如果最小生成树不存在则输出impossible. 给定一张边带权的无向图G=(V, E),其中V表示 ...
- java 日期累加，如何求一年后日期，一月后日期，一周后日期和一天后日期
import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.Calendar; import ja ...
- js动画函数
var tween = { linear: function (t, b, c, d) { return c * t / d + b; }, easeIn: function (t, b, c, d) ...
- 【巨杉数据库SequoiaDB】巨杉Tech | 分布式数据库Sysbench测试最佳实践
引言 作为一名DBA,时常需要对某些数据库进行一些基准测试,进而掌握数据库的性能情况.本文就针对sysbench展开介绍,帮助大家了解sysbench的一般使用方法. sysbench简介 什么是 ...
- 安装SQL Server2008出现Restart computer failed的解决办法
1.打开注册表编辑器 2.找到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager双击文件夹 3.找到PendingF ...
- 关于向sql中插入datetime部分问题总结
非int型数据要加单引号, 用format格式化当前时间后用String插入即可 读取时用时间戳读取datetime或转化为string存储 读 public static String gainTi ...
- Dataset: online data
From Kaggle: Appliances Energy Prediction Energy consumption of the Netherlands International Energy ...
- 2020牛客寒假算法基础集训营5 B.牛牛战队的比赛地 (二分/三分)
https://ac.nowcoder.com/acm/contest/3006/B 三分做法 #include<bits/stdc++.h> #define inf 0x3f3f3f3f ...