广告位联系
返回顶部
分享到

CSS3颜色值RGBA与渐变色的使用

css 来源:互联网搜集 作者:秩名 发布时间:2020-03-07 11:39:24 人浏览
摘要

CSS3之前渐变色图片只能用背景图片 CSS3的渐变色语法可以让我们省去下载图片的开销 并且在改变浏览器分辨率时有更好的效果 颜色值RGBA 我们熟悉的rgb颜色标准,是由r(red)、g(green)、b(blue)三种颜色叠加变化形成各种颜色 取值0~255,或0~100% rgba就

CSS3之前渐变色图片只能用背景图片
CSS3的渐变色语法可以让我们省去下载图片的开销
并且在改变浏览器分辨率时有更好的效果

颜色值RGBA

我们熟悉的rgb颜色标准,是由r(red)、g(green)、b(blue)三种颜色叠加变化形成各种颜色
取值0~255,或0~100%

rgba就是在rgb基础上增加了alpha不透明度参数

例子1、正常的红色rgb颜色

?
1
2
3
4
5
.demo {
    width: 100px;
    height: 100px;
    background-color: rgb(255, 0, 0);
}

例子2、使用rgba 红色半透明效果

?
1
2
3
4
5
.demo {
    width: 100px;
    height: 100px;
    background-color: rgba(255, 0, 0, 0.5);
}

alpha取值0~1,值越小越透明一般 0.2-0.5居多

线性渐变linear-gradient

gradient是“倾斜度”的意思,linear是“线性的”的意思
渐变色就是在多个颜色间平稳过渡,形成绚丽的色彩
线性渐变linear-gradient参数有渐变的方向(选填)和任意个渐变色

例子3、红绿蓝渐变色

?
1
2
3
4
5
.demo {
    width: 100px;
    height: 100px;
    background: linear-gradient(red,lime,blue);
}

注意我这里写的是background不是background-color
(其实渐变色是background-image的函数)

不填写渐变方向默认是从上到下

渐变方向有以下属性值
to top、to bottom(默认)、to left、to right
to top left、to top right、to bottom left、to bottom right
或者填写角度 xxxdeg
比如to top left就代表方向朝向左上

?
1
2
3
4
5
.demo {
    width: 100px;
    height: 100px;
    background: linear-gradient(to top left,red,lime,blue);
}

角度0deg与to top等价,增加角度,相当于顺时针旋转

?
1
2
3
4
5
.demo {
    width: 100px;
    height: 100px;
    background: linear-gradient(20deg,red,lime,blue);
}

在每一个颜色的后面可以添加各个颜色渐变的位置

?
1
2
3
4
5
.demo {
    width: 100px;
    height: 100px;
    background: linear-gradient(red 30%,lime 50%,blue 70%);
}

如果不填的话,浏览器就默认均分了,比如三个色值默认就是0%,50%,100%

还有一个不常见的函数repeating-linear-gradient使我们可以重复线性渐变

?
1
2
3
4
5
.demo {
    width: 100px;
    height: 100px;
    background: repeating-linear-gradient(red, rgba(100,100,100,0.5),blue 50%);
}

结果就画出了这样巨丑无比的渐变色

径向渐变radial-gradient

radial意思是“径向的、辐射状的”
就是一个渐变中心向外放射渐变

?
1
2
3
4
5
.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(red,lime,blue);
}

和线性渐变类似
不过第一个参数(选填)是径向渐变的渐变形状、位置
可以使用圆形circle、椭圆形ellipse(默认)

?
1
2
3
4
5
.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(circle,red,lime,blue);
}

可以使用shape at postion的格式定义渐变中心的位置

?
1
2
3
4
5
.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(circle at 30% 30%,red,lime,blue);
}

渐变位置可以使百分数形式,也可以是像素形式
如果只写一个值时,另一个值默认是中间位置50%

?
1
2
3
4
5
.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(circle at 30%,red,lime,blue);
}

渐变尺寸如果你不想用关键字,也可用用数字形式

?
1
2
3
4
5
.demo {
    width: 200px;
    height: 100px;
    background: radial-gradient(100px 100px at 50px 50px,red,lime,blue);
}

表示渐变尺寸100px*100px,渐变位置50px*50px

径向渐变同样有一个重复渐变的函数
用法和线性渐变的类似,这里就不多解释了

?
1
2
3
4
5
.demo {
    width: 200px;
    height: 100px;
    background: repeating-radial-gradient(red 10%,lime 20%,blue 30%);
}

  


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://www.jb51.net/css/715377.html
相关文章
  • CSS3浏览器兼容的介绍

    CSS3浏览器兼容的介绍
    一、浏览器兼容 1.1、概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核
  • CSS元素定位之通过元素的标签或者元素的id、cl

    CSS元素定位之通过元素的标签或者元素的id、cl
    大部分人在使用selenium定位元素时,用的是xpath元素定位方式,因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观,更好
  • 微信小程序纯CSS实现无限弹幕滚动效果

    微信小程序纯CSS实现无限弹幕滚动效果
    啥也不说,先上效果图 实现背景 产品:我们需要一个弹幕滚动效果,类似于微博热搜那种实时评论,但是我们的数据是固定的20条,你让他
  • 使用CSS构建强大且酷炫的粒子动画效果

    使用CSS构建强大且酷炫的粒子动画效果
    粒子动画,顾名思义,就是页面上存在大量的粒子构建而成的动画。传统的粒子动画主要由 Canvas、WebGL 实现。 当然,不使用 HTML + CSS 的主要
  • flex:1的详细介绍

    flex:1的详细介绍
    简单的来说一下在别人问你这个问题的时候怎么来回答它 前端新人,如有错误求大佬指出~求教???? 情景复现 大佬提问:你知道flex: 1;的更深
  • 新的CSS伪类函数 :is 和 :where()示例介绍

    新的CSS伪类函数 :is 和 :where()示例介绍
    在编写 CSS 时,有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如,如果您想对标题中的 b 标签进行颜色调整,我
  • 纯CSS打字动画的实现方法

    纯CSS打字动画的实现方法
    在一些技术网站中,经常会看到这样一种展示效果:逐个显示一段文本中的字符,模拟出一种打字的效果。通过这种方式可以显著地提升网
  • 实现el-form每行显示两列底部按钮居中效果的教程

    实现el-form每行显示两列底部按钮居中效果的教程
    el-form 每行显示两列,底部按钮居中 问题: 以前的解决办法是:el-col,el-row。但是这里只有一个el-form-item的label数据是已知的,其余项都是循
  • CSS实现六边形的图片效果的代码

    CSS实现六边形的图片效果的代码
    前言 在CodePen上看到一个有意思的效果: 这个效果的难点在于六边形的绘制, 那么接下来我们就一起来看下作者是怎么实现他的吧 实现思路
  • CSS浮动引起的高度塌陷问题的详细介绍

    CSS浮动引起的高度塌陷问题的详细介绍
    正常页面布局 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 style *{ margin:0; padding: 0; } .content{ width:400px; border:1px solid #000; } .box{ width:200px;
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计