web前端入门——CSS3背景颜色渐变属性(gradients)_css3 背景色渐变-程序员宅基地

技术标签: css3  

css3 渐变

CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

线性渐变
语法:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

说明:

direction:默认为to bottom,即从上向下的渐变;

stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。

1. 单一方向渐变:

	left 		从左边开始
	right		从右边开始
	top			从上边开始
	bottom   	从底部开始
	注意: 需要添加兼容前缀

	to left 到左边(结束位置)
	to right 到右边
	to top	到顶部
	to bottom 到底部
	注意: 不要添加兼容前缀

2. 对角渐变:

	left top	左上开始
	left bottom 左下开始
	right top	右上开始
	注意: 带兼容前缀
			
	to left top 到左上(结束位置)
	注意: 不带兼容前缀

3. 角度的渐变
10deg 10度

4. 默认情况下颜色趋于均分
可以指定颜色分布的百分比,让颜色按照百分比进行渐变
blue 10% 到10% 都是蓝色
red 10px 到10px都是红色

  • 示例1:to left、top right、to bottom、to top
    在这里插入图片描述
  • 示例2:to right bottom、top right top、top left bottom、top left top
    在这里插入图片描述
  • 示例3:使用角度渐变linear-gradient(10deg, red, blue)
角度是指水平线和渐变线之间的角度,逆时针方向计算。

换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。

但是,请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准,即 0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。

换算公式 90 - x = y 其中 x 为标准角度,y为非标准角度。

在这里插入图片描述

径向渐变(一定要加浏览器前缀)
径向渐变不同于线性渐变,线性渐变是从“一个方向”向“另一个方向”的颜色渐变,而径向渐变是从“一个点”向四周的颜色渐变
语法:

background: radial-gradient(center, shape, size, start-color, ..., last-color);
     
说明:

center:渐变起点的位置,可以为百分比,默认是图形的正中心。

shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样。

size:渐变的大小,即渐变到哪里停止,它有四个值。 closest-side:最近边; farthest-side:最远边; closest-corner:最近角; farthest-corner:最远角。

渐变位置:

	默认从中心到四周

	left	从左边到四周的渐变
	right
	top
	bottom
				
	left top	从左上角到四周的渐变
	left bottom	
	right top
	...
				
	10px 30px	距离左边10px 距离上边30px

形状:

	默认椭圆	ellipse
	正圆		circle
	注意: 元素是正方形,则都是正圆

大小:

	size:渐变的大小,即渐变到哪里停止,它有四个值。 
		closest-side:最近边; 
		farthest-side:最远边; 
		closest-corner:最近角; 
		farthest-corner:最远角。
  • 示例1:多颜色节点均匀分布
div {
     background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); } 
div {
     background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }
  • 示例2:多颜色节点均匀分布
div {
     background: radial-gradient(circle, red, yellow, green); } 
div {
     background: radial-gradient(ellipse, red, yellow, green); }
  • 示例3:设置渐变形状
circle:渐变为最大的圆形; ellipse:根据元素形状渐变,元素为正方形是显示效果与circle无异

在这里插入图片描述

  • 示例4:不同尺寸的渐变
div {
     background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); } 
div {
     background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }
div {
     background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }
div {
     background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black);}

在这里插入图片描述

重复性渐变

1.重复性线性渐变

div {
     background: repeating-linear-gradient(red, yellow 10%, green 20%); }

2.重复性径向渐变

div {
     background: repeating-radial-gradient(red, yellow 10%, green 20%); }

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_39347364/article/details/105034488

智能推荐

bootstrap图片轮播-程序员宅基地

文章浏览阅读117次。<!DOCTYPE html><html><head> <title>Bootstrap 实例 - 简单的轮播(Carousel)插件</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"..._bootstrap图片轮播将文字放在图片外面

html选择器_html中同级选择器能否继承-程序员宅基地

文章浏览阅读2.8k次,点赞6次,收藏12次。CSS的作用: 就是用来改变文本的样式CSS三大特性 继承性:给父类元素设置一些属性以后,子类也可以使用,叫继承性 如果对父类标签设置样式以后,如果子类标签没有单独设置样式默认继承父类的样式 注意: 1、并不是所有的都可以继承,只有以color font- text line开头的才可以继承 2、继承不仅仅是直接子代可以继承,后代同样可以继承 3、超链接..._html中同级选择器能否继承

NumPy 高维数组降维方法详细分析_用ndarray函数进行降维-程序员宅基地

文章浏览阅读1.2w次,点赞7次,收藏9次。numpy的flat、flatten、ravel、reshape四个函数都是对多维数组进行降维(降至一维)使用方法:import numpy as npa = np.arange(64).reshape([4,4,4])print(a)#对三维数组a进行降维打击b = a.reshape(-1)print('reshape方法:\n',b)c = []for x in a.flat: c.append(x)print('flat迭代器:\n',c)d = a.flatt_用ndarray函数进行降维

用g.raphael.js高速绘制饼图、柱状图、点状图、折线图(上)_raphael,化饼状图·-程序员宅基地

文章浏览阅读3.5k次。首先介绍一下什么是g.raphael。这个又要说到什么是raphael.js。raphael是一个javascript库,可以用来跨浏览器绘制各种图形,只要是你想得到的图形都可以用raphael绘制出来,而且raphael还可以实现各种常用和常见的动画效果,比如放大、移动、旋转等等。总之只要你想得到的效果,raphael基本上都可以实现。但是问题来了,挖掘机技术……啊呸,raphael本身绘制一些_raphael,化饼状图·

黑马程序员_Java学习日记23_高新技术2-程序员宅基地

文章浏览阅读849次。----------------------android培训、java培训、期待与您交流! ---------------------1.反射概述Class类代表Java类,它的各个实例对象又分别对应什么?a.对应各个类在内存中的字节码。b.一个类被类加载器加载到内存中,占用一片存储空间,这个空间里面的内容就是类的字节码,不同的类的字节码是不同的,所以他们在内存中的内容是

Springboot+rabbitmq的简单使用_rabbitmq 和springboot 实现简单功能-程序员宅基地

文章浏览阅读9.4k次,点赞7次,收藏23次。Springboot+rabbitmq的简单使用Rabbitmq是什么Rabbitmq的简单图解rabbitmq的使用过程Springboot集成Rabbitmq实现即时消息发送Rabbitmq是什么MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法。应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们。RabbitMQ..._rabbitmq 和springboot 实现简单功能

随便推点

AppStorage 基础教程SwiftUI 2新属性-程序员宅基地

文章浏览阅读544次。AppStorage 基础教程SwiftUI2新属性AppStorage属性包装程序类型,通过UserDefaults实现数据持久化。定义@frozen @propertyWrapper struct AppStorage<Value>实战代码import SwiftUIstruct ContentView: View { @AppStorage("text") var text = "" var body: some View { VStack_appstorage

NoParameters接口的使用-程序员宅基地

文章浏览阅读1.1k次。今天从同事那里了解到一个接口 org.apache.struts2.interceptor.NoParameters,之前从来没用过,私下研究了一下觉得很有用,记下来留作以后参考: NoParameters.java,源码附上:[code="java"]package org.apache.struts2.interceptor;/** * This marker inter..._swagger noparameters

Android 多个应用之间声音竞争之Android 系统处理音频焦点(AudioFocus)_android 后台播放与其他应用播放器声音重叠-程序员宅基地

文章浏览阅读6.9k次。问题发现最近在项目中发现我们的自己的apk和第三方的媒体apk会出现串音问题。即两者之间的声音会重叠在一起。解决问题1. 使用多媒体按键去控制第三方应用的声音播放(无效果)通过触发媒体的按钮来操作播放器状态:KeyEvent.KEYCODE_MEDIA_PAUSE public static void sendMediaButton(Context context, in..._android 后台播放与其他应用播放器声音重叠

Linux提权方法总结-程序员宅基地

文章浏览阅读1.6k次,点赞6次,收藏6次。Linux提权方式总结_linux提权

基于javaweb+springboot的电商书城平台系统(java+springboot+mysql+spring+jsp)_基于springboot+jsp的涉外电子商务系统-程序员宅基地

文章浏览阅读232次。基于javaweb+springboot的电商书城平台系统(java+springboot+mysql+spring+jsp)JAVA springboot 电商书城平台系统(已调试) 主要实现了书城网站的浏览、加入购物车操作、订单操作、支付操作、分类查看、搜索、以及后台上传图书信息以及订单管理和一些基本操作功能主要技术:java springboot springbmvc shiro mybatis mysql jquery css js jsp bootstarp.js主要功能截图_基于springboot+jsp的涉外电子商务系统

java.net.URISyntaxException: Illegal character in scheme name at index 0: 10-程序员宅基地

文章浏览阅读8.7k次,点赞40次,收藏3次。今天用java调用一个http请求结果报java.net.URISyntaxException: Illegal character in scheme name at index 0: 10这个错误,首先百度,跳出一堆博客结果全是复制黏贴,第一页全是一个答案,都是什么有|等特殊字符,结果我的url里面根本没有这些特殊字符。大家写技术博客只会抄袭他人,复制过来真是可耻。下面是我自己的排查结果,..._java.net.urisyntaxexception: illegal character in scheme name at index 0: 10