首页 > 其他分享 >css 背景渐变

css 背景渐变

时间:2022-10-24 14:12:29浏览次数:54  
标签:gradient 背景 渐变 116 rgba 235 fff css

1.渐变从左到右

background: linear-gradient(to right,#000,#fff);

 

2.渐变从上到下

background: linear-gradient(tobottom,#000,#fff);

 

3.角度渐变(60°)

background: linear-gradient(60deg, #000, #fff);

 

4.径向渐变

background: radial-gradient(rgba(235,116,63,.9),rgba(235,116,63,.3),rgba(235,116,63,0),rgba(235,116,63,0));

 

说明,背景渐变可以使用#fff,也可以使用带透明度的rgba(255,255,255..3);

 

标签:gradient,背景,渐变,116,rgba,235,fff,css
From: https://www.cnblogs.com/yeziyou/p/16821269.html

相关文章

  • css换行
    1.word-break:break-all;只对英文起作用,以字母作为换行依据2.word-wrap:break-word;只对英文起作用,以单词作为换行依据3.white-space:pre-wrap;只对中文起作用,强制......
  • 【CSS】464- 5种 CSS 浮动和清除浮动的方法
    浮动是布局的时用到的一种技术,能够方便我们进行布局。1、浮动的设置:css属性float:left/right/none左浮动/右浮动/不浮动(默认)2、浮动的原理:使当前元素脱离普通流,相当于浮动起......
  • 纯css实现卡牌小标签
    纯css实现卡牌小标签​​效果图​​​​代码部分​​​​补充​​效果图代码部分话不多说,直接上代码!<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8">......
  • CSS文字样式的相关属性
    Text-transform常用属性text-transform:capitalize每个单词的首字母转换为大写字母text-transform:uppercase全部转换为大写text-transform:lowercase全部转换为小写tex......
  • 纯 CSS 实现十个还不错的 Loading 效果
    来自:https://juejin.cn/post/7080542771387301896 侵删在推特上面看到T.Afif介绍的十个Loading效果。如上图。Yeah,很赞哦,挺实用的,遂记录下来。为保证运行正常,......
  • 「CSS畅想」画饼充饥,送给我好友的瓶瓶罐罐
    灵感来源情人节这天,我好友会收到她对象的礼物。一般这种节日我是不送实物礼品的,我会送几句心灵鸡汤小段子,做为精神上的慰藉。但是,自从上次给她演示了前端技术之后,我感觉她对......
  • 面试HTML CSS基础
    01.如何将下面的代码修改的更有语义化?<div><div>这是一个标题</div><div>这是一段文字</div><div><div>列表1</div><div>列表2</div></div></div......
  • c/c++背景颜色和字体颜色
    https://blog.csdn.net/weixin_59266315/article/details/124482907?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIS......
  • CSS实现渐变色边框
    三种方式:1.用border-image来实现:.box{width:200px;height:200px;border:10pxsolid#ddd;border-image:......
  • 前端开发——CSS样式
       1.CSS样式的三种引入方式 1.1内嵌式   1.2外联式     1.3行内式  三种引入方式用处:  2.基础选择器 ......