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骨架中,可以用 ...
随机推荐
- JS 动态改变浏览器title标题
onfocus 和 onblur 事件,监听离开页面和进入页面 <script> window.onfocus = function () { document.title = '要走的人 ...
- WPF-命令-基础知识
命令模型的主要元素: 1.命令 2.命令绑定:命令连接到相关的应用程序逻辑 3.命令源:命令源触发命令, 4.命令目标:应用程序逻辑. -------------------------------- ...
- How to Install Oracle Java 11 on Ubuntu 18.04 LTS (Bionic) Written by Rahul, Updated on April 3, 20
本文系转载备份 请阅读点击下面链接阅读原文以获取更佳地阅读体验.谢谢. How to Install Oracle Java 11 on Ubuntu 18.04 LTS (Bionic) Writt ...
- babel plugin
a = () => {}, // Support for the experimental syntax 'classProperties' isn't currently enabled ya ...
- ms17-010 利用msf的exp和一个扫描工具的复现
0x01简介 永恒之蓝漏洞是方程式组织在其漏洞利用框架中一个针对SMB服务进行攻击的漏洞,该漏洞导致攻击者在目标系统上可以执行任意代码. 攻击对象:win7及win7以下的操作系统且开启了445端口s ...
- setTimeout(call,0)作用
setTimeout(call,0)作用 经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗?后来通过查资料以及实验得出以下两个作用, ...
- C语言-无符号数与有符号数不为人知的秘密
一.无符号数与有符号数 1.计算机中的符号位 数据类型的最高位用于标识数据的符号 -最高位为1,表明这个数为负数 -最高位为0,表明这个数为正数 #include <stdio.h> in ...
- 占位 DL
占位 DL include: DL404
- 巨杉内核笔记 | 会话（Session）
SequoiaDB 巨杉数据库是一款金融级分布式关系型数据库,坚持从零开始打造分布式开源数据库引擎.“内核笔记系列”旨在分享交流 SequoiaDB 巨杉数据库引擎的设计思路和代码解析,帮助社区用户深 ...
- 巨杉Tech | 使用 SequoiaDB + Docker + Nodejs 搭建 Web 服务器
容器化技术的出现大大简化了应用开发人员在构建底层基础设施的工作.SequoiaDB 巨杉数据库于3.2.1版本正式推出了 Docker 容器化部署方案,本文将会基于 SequoiaDB 巨杉数据库与N ...