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骨架中,可以用 ...
随机推荐
- float浮动造成高度塌陷的解决办法
Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...
- C# Dynamic与Newtonsoft.Json的应用
C#中Dynamic关键字 dynamic关键字和动态语言运行时(DLR)是.Net 4.0中新增的功能. 什么是"动态"? 编程语言有时可以划分为静态类型化语言和动态类型化语言. ...
- k8s service的四种类型
ClusterIp 默认类型,每个Node分配一个集群内部的Ip,内部可以互相访问,外部无法访问集群内部. NodePort 基于ClusterIp,另外在每个Node上开放一个端口,可以从所有的位置 ...
- mac 复制文件路径
选中文件 ctrl + option +c 可以复制文件路径
- vue自定义日期选择,类似美团日期选择,日历控件,vue日历区间选择
一个日历的控件,基于vue的,可以日历区间选择,可用于酒店日历区间筛选,动手能力强,可以修改成小程序版本的,先上效果图 里面的颜色样式都是可以修改的 选择范围效果 话不多说,直接上干货,代码可以直接复 ...
- centos6.8安装教程
特别详细的一个安装教程以及镜像下载等,用虚拟机不会安装或者安装失败的可以参考一下. https://blog.csdn.net/wu_zeqin/article/details/79833046
- 浏览器缓存信息(Autocomplete )
Autocomplete HTML Attribute Not Disabled for Password Field 漏洞详细Web系统被识别到支持自动完成功能,这样通过浏览器可以获取到敏感信息. ...
- Django | 解决“(1146, "Table 'mydb.django_session' doesn't exist")”报错的方法
我只写了下面一行 就生成了session表 manage.py makemigrations sessions manage.py migrate sessions 参考:https://www.cn ...
- SQL Server 检查和处理死锁问题
SELECT spid, blocked, DB_NAME(sp.dbid) AS DBName, program_name, waitresource, lastwaittype, sp.login ...
- 装饰器_python
一.装饰器中提及的知识点 装饰器主要作用:在原函数基础上添加新功能 1.作用域:LEGB 2.高阶函数 3.闭包(在一个内部函数中,对在外部作用域(但不是在全局作用域)的变量进行引用,那么内部函数就认 ...