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骨架中,可以用 ...
随机推荐
- 接口测试（http 和 rpc）
接口测试主要分HTTP和RPC两类,RPC类型里面以Dubbo较为知名.互联网微服务架构,两种接口都需要做接口测试的,不管是业务测试还是回归测试: Dubbo:Java栈的互联网公司比如阿里.美团.5 ...
- Milking Time POJ - 3616 dp 感觉像背包
#include<iostream> #include<algorithm> #include<cstring> #include<cstdio> us ...
- Windows7下Docker的安装
转自 https://blog.csdn.net/xiangxiezhuren/article/details/79698913 无法打开图3,打开属性.给其添加git路径 无法使用图2下载 h ...
- hive创建表时报错
这是因为mysql字符集的原因.修改mysql的字符集. mysql> alter database hive character set latin1; 参考博客:https://blog.c ...
- ubuntu19.04 redis启动和停止及连接
1.启动停止 如果以(sudo apt install redis-server)方式安装 启动: sudo srevice redis start 停止: sudo srevice redi ...
- 修改json数据中key(键值)
//方法一:修改JSONObject的键 public static JSONObject changeJsonObj(JSONObject jsonObj,Map<String, String ...
- JS高级---正则表达式其他方法的使用
正则表达式其他方法的使用 正则表达式中:g 表示的是全局模式匹配 正则表达式中:i 表示的是忽略大小写 var str = "中国移动:10086,中国联通:10010,中国电信:10000 ...
- react 和 vue 的优缺点总结
React推广了Virtual DOM并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写HTML Vue使用模板系统而不是JSX,但能对现有应用的升级更加容易,这是因为模板用的就 ...
- Jquery change方法
jQuery 事件 - change() 方法 当输入域发生变化时改变其颜色: $(".field").change(function(){ $(this).css("b ...
- cat 显示文本、less 分屏显示文本、more 分页显示文件、head 显示文件的前面的内容、cut 切割、paste合并、wc用来对文本进行统计、sort排序、权限、关闭文件、vim的使用
cat 显示文本 -E 显示结尾的$符 -n 对显示的每一行进行编号 -b 对非空行进行编号 -s 对连续的空行进行压缩 tac 倒序显示 less 分屏显示文本 向下翻一屏 空格 向下翻一行 回车 ...