当前位置:首页 > 前端技术 > CSS——颜色变化

CSS——颜色变化

2022年11月09日 23:24:43前端技术22

根据设置的颜色位置就行显示

  1. 颜色渐变1
<style type="text/css">
  div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:linear-gradient(red,blue);
    
    background:-moz-linear-gradient(left,#ace,#f96);
    background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
    background:-webkit-linear-gradient(left,#ace,#f96);
    background:-o-linear-gradient(left,#ace,#f96);
  }
  </style>

CSS——颜色变化 _ JavaClub全栈架构师技术笔记
2. 颜色渐变2

 div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:-webkit-linear-gradient(top left,red,rgba(255,0,0,0));
  } 

CSS——颜色变化 _ JavaClub全栈架构师技术笔记
3. 颜色渗透

div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
  } 

CSS——颜色变化 _ JavaClub全栈架构师技术笔记

  1. 光圈1
  div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:radial-gradient(red,yellow,blue);
  }

CSS——颜色变化 _ JavaClub全栈架构师技术笔记

  1. 光圈2
div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:radial-gradient(red 20%,yellow 30%,blue 40%);
  }

CSS——颜色变化 _ JavaClub全栈架构师技术笔记
6. 根据方向改变颜色1

div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:-webkit-radial-gradient(bottom left,red,yellow,blue 80%);
  }

CSS——颜色变化 _ JavaClub全栈架构师技术笔记

  1. 根据方向改变颜色2
  div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:-webkit-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
  }

CSS——颜色变化 _ JavaClub全栈架构师技术笔记

作者:Zjaun
来源链接:https://blog.csdn.net/Zjaun/article/details/87165150

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/69160.html

标签: css
分享给朋友:

“CSS——颜色变化” 的相关文章

VSCode代码自动补全(html标签、style样式、css属性及值)

VSCode代码自动补全(html标签、style样式、css属性及值、),修改配置文件即可完成! 操作环境 1. 系统window 10 2. 软件VS code 2019汉化 1.按CTRL+SHIFT+P 2.输入搜索Su...

CSS

CSS

文章目录 1. CSS 的概念 2. CSS 的作用 3. CSS 与 HTML 的结合方式 4. CSS 格式 5. 选择器 5.1 选择器的作用...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

  【实验题目】HTML&CSS实验(5) 【实验目的】学习颜色、字体、文本格式化和盒模型的样式定义。                  ----------------------个人作业,如果有后辈的作业习题一致,可以参考学习,一起交流...

css实现页面底部固定在屏幕最下方,内容占满屏后紧跟其后的两种方法

1.只针对底部高度固定的情况,不能解决底部高度不固定的情况, 原理:主要内容放在page-main里面,page-container最小高度100%(注意这里html,body高度也要设为100%),position为relative。footer的position为abs...

CSS 选取第几个标签元素

在前端开发中,我们可能会碰到这样的需求:想让列表中的第一个部分显示不同的样式 ,想让列表中的偶数部分显示不同的背景颜色,想让列表中的最后一部分样式不一样……这样的需求,我们怎样来实现?其实,如果前面文件是php开发的,可以通过php的循环语句+判断语句+css样式来实现。但是,如...

内联式css样式,直接写在现有的HTML标签中

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> &l...

【HTML&CSS】常用标签以及编写格式

【HTML&CSS】常用标签以及编写格式

一、学习内容回顾 HTML Hyper Text Markup Language:超文本标记语言 超文本:不仅仅是纯文本,还包括字体效果和多媒体(图片/音频/视频) ML标记语言: <开始 属性=“xxx”>标签体 学习HTML主要学习...

css如何让div显示在最上层

方法:设置div样式 z-index:autoauto可定义为一个值(整数数字),越大代表越置前,如可定义为: z-index:999。前提是div是定位元素。 作者:猪猪猪猪猪鸭 来源链接:https://blog.csdn.net/qq_34173549/arti...

CSS样式学习

CSS样式学习 1.css概述 css(cascading style sheet):是一种层叠样式表语言 css的作用是修饰HTML页面,设置html元素的样式,让HTML页面更加好看。 css样式能写在html文件中,css的...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。