H5C3--线性渐变 linear-gradient,径向渐变radial-gradient,重复渐变radial-gradient
一.线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
/*渐变添加:方向,颜色1,颜色2,颜色3
渐变并不是一个单一的颜色,它不能使用color的方式添加,而需要使用image的方式添加,意味着添加语法添加的是背景图片
线性渐变:linear-gradient(方向,颜色1 位置,颜色2 位置)
方向:方向默认是垂直向下,如果想设置可以这样:
to bottom:默认值,向下 180deg
to top: 0deg
to right: 90deg
to left: 270deg
角度值:
位置:以百分比做为位置的单位*/
/*background-image: linear-gradient(90deg, red 50%,blue 100%);*/
background-image: linear-gradient(90deg, red,orange,yellow,green,rgb(0,255,255),blue,purple);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
二.径向渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 200px;
/*radial-gradient:径向渐变,以某个点做为圆心点往外扩散
radial-gradient(形状 大小 位置,颜色1 位置1,颜色2 位置2.....)
形状:circle ellipse.如果开头是正方形,那么就会产生circle渐变,如果开头是椭圆,那么就会产生ellipse渐变
大小:
closest-side:最近的边。会产生从指定圆心到最近的边的径向渐变
farthest-side:最远的边。会产生从指定圆心到最近的边的径向渐变
closest-corner:最近的角。会产生从指定圆心到最近的角的径向渐变
farthest-corner:最远的角。会产生从指定圆心到最远的角的径向渐变--默认值
位置:at 关键字(left right top center bottom) | 具体坐标值 50px 50px --默认为center
*/
/*background-image: radial-gradient(red,blue);*/
background-image: radial-gradient(circle farthest-side at 50px 50px,red 50%,blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
三.重复渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
/*background: radial-gradient(
#fff 0%,#fff 10%,#000 10%,#000 20%,
#fff 20%,#fff 30%,#000 30%,#000 40%,
#fff 40%,#fff 50%,#000 50%,#000 60%,
#fff 60%,#fff 70%,#000 70%,#000 80%,
#fff 80%,#fff 90%,#000 90%,#000 100%
);*/
/*重复渐变,会根据已经设置好的渐变进行重复生成*/
background: repeating-radial-gradient(
#fff 0%,#fff 10%,#000 10%,#000 20%
);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
H5C3--线性渐变 linear-gradient,径向渐变radial-gradient,重复渐变radial-gradient的更多相关文章
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...
- Android线性布局(Linear Layout)
Android线性布局(Linear Layout) LinearLayout是一个view组(view group),其包含的所有子view都以一个方向排列,垂直或是水平方向.我们能够用androi ...
- FastReport.Net使用:[24]其他控件(邮政编码(Zip Code),网格文本(Cellular Text)以及线性刻度尺(Linear Gauge))
邮政编码(Zip Code) Zip Code仅支持数字(0~9) Zip Code支持数据列绑定,表达式,文本等模式 可通过修改SegmentCount属性的值来确定Zip Code的位数. 数字右 ...
- 【ML】求解线性回归方程(Linear Regression)
参考资料:openclassroom 线性回归(Linear Regression) 为了拟合10岁以下儿童年龄(x1)与身高(y)之间的关系,我们假设一个关于x的函数h(x): h(x) = Θ0+ ...
- 线性判别分析(Linear Discriminant Analysis, LDA)算法分析
原文来自:http://blog.csdn.net/xiazhaoqiang/article/details/6585537 LDA算法入门 一. LDA算法概述: 线性判别式分析(Lin ...
- 线性判别分析(Linear Discriminant Analysis, LDA)算法初识
LDA算法入门 一. LDA算法概述: 线性判别式分析(Linear Discriminant Analysis, LDA),也叫做Fisher线性判别(Fisher Linear Discrimin ...
- 线性分类 Linear Classification
软分类:y 的取值只有正负两个离散值,例如 {0, 1} 硬分类:y 是正负两类区间中的连续值,例如 [0, 1] 一.感知机 主要思想:分错的样本数越少越好 用指示函数统计分错的样本数作为损失函数, ...
- 线性中继器 Linear Repeater
线性中继器(Linear Repeater,缩写L-REP) 高速信号在传输介质上传递时,信号衰减和噪声会导致有效数据信号越来越弱.L-REP就是用来再生高速信号,通过使用同等化(Equalizat ...
- [图解算法]线性时间选择Linear Select——<递归与分治策略>
#include <ctime> #include <iostream> using namespace std; template <class Type> vo ...
随机推荐
- Android开发 SpannableString开发详解
前言 SpannableString,是google提供用来处理富文本的功能类.支持很多文本内容的效果变化.另外,它也是Android实现富文本编辑器的关键. 关键API详解 String conte ...
- 一个简单的SpringBoot入门程序
1. 使用IDEA构建Maven项目 <?xml version="1.0" encoding="UTF-8"?> <project xmln ...
- leetccode-130-被围绕的区域
题目描述: 方法一:dfs class Solution: def solve(self, board: List[List[str]]) -> None: """ ...
- 【自家测试】2017-12-16 FJOI2016 d1
1. 所有公共子序列问题(allcs.pas/c/cpp)★问题描述:一个给定序列的子序列是在该序列中删去若干元素后得到的序列.确切地说,若给定序列X= x 1 x 2 ... x m ,则另一序列Z ...
- Android之selector选择器的使用
1.selector简介 selector中文的意思选择器,在Android中常常用来作组件的背景,实现组件在不同状态下不同的背景颜色或图片的变换.使用十分方便.主要是用来改变ListView和But ...
- momentjs 使用总结
一.安装 cnpm install moment 二.引入 var moment = require('moment') 三.使用 let today = moment().format('YYYY- ...
- Git命令使用和配置
git config --global user.name "your name" git config --global user.email "your email& ...
- python实现批量修改服务器密码
需求:机房.线上有多台主机,为了保障安全,需要定期修改密码.若手动修改,费时费力易出错. 程序应该满足如下需求 : 1.在现有的excel密码表格,在最后一个字段后面生成新的密码,另存为一个新的exc ...
- Python学习day19-常用模块之re模块
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- <每日一题>题目28:生成随机的测验试卷(单选题)
#项目:生成随机的测验试卷文件 import random #资料库 capitals = {'北京市':'京','上海市':'沪','天津市':'津','重庆市':'渝','河北省':'冀','山西 ...