位置: IT常识 - 正文

css渐变(CSS渐变背景应用)

编辑:rootadmin
css渐变

推荐整理分享css渐变(CSS渐变背景应用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css渐变色,css渐变背景色,css渐变背景,css渐变字体,css渐变色代码,css渐变背景色,css渐变色,css渐变色代码,内容如对您有帮助,希望把文章链接给更多的朋友!

 1.  线性渐变(是从一个方向到另一个方向的渐变)

属性值:background:linear-gradient(颜色)

✍默认值:从上到下线性渐变: 

代码:

 结果:

✍ 属性延伸:

(1)改变渐变方向:

从下到上:background:linear-gradient(to top yellow,green)

从左到右:background:linear-gradient(to right yellow,green)

从右到左:background:linear-gradient(to left yellow,green)

从左上到右下:background:linear-gradient(to bottom right yellow,green)

(2)改为任意角度的渐变

属性:background:linear-gradient(50deg yellow,green)

含义是:从红色到绿色50°渐变;

0°渐变是:红色从下到上渐变为绿色;90°是从左到右;180°是从上到下;270°是从右到左

2.  径向渐变(从一个小点到四周的渐变)

属性:background:radial-gradient(颜色值)

css渐变(CSS渐变背景应用)

(1)不规则颜色渐变:background:radial-gradient (yellow 30%,orange 50%,green 80%)

代码:

 结果:

 这个百分比的含义是,拿上面的代码说明:黄色到盒子30%的位置开始渐变为橙色,30%以前不渐变都是黄色,橙色从50%的位置开始渐变为绿色,80%以后都是纯绿色。

还有一个极端一点的:background:radial-gradient(red 50%,bule 50%)

含义是:红色从50%位置开始渐变,而50%以后都是蓝色,所以从50%-50%之间没有渐变,所以两个纯色的圆,前50%是红色,后50%是蓝色。

(2)设置渐变形状

(3)改变中心点的位置和改变渐变的大小

 x轴60%,y轴40%的位置,坐标原点在左下角,,,

如果属性不好用了,可以在前面加:“-webkit-”(google浏览器特定的格式,其他浏览器可以去百度查查)

3.  重复渐变

图示:

 代码:

 结果:

 代码:

 结果:

4.太极小练习:

用到“::before”和“::after”伪元素,和线性渐变的知识:

代码:

结果:

本文链接地址:https://www.jiuchutong.com/zhishi/300121.html 转载请保留说明!

上一篇:【常见CSS扫盲之渐变效果】好看的24种CSS渐变效果汇总(附源码)(常用的css样式有哪些)

下一篇:使用 JavaScript 的响应式计数器动画(javascript怎么用)

  • 小规模纳税人能开专票吗2023
  • 本期收入和本期减除费用
  • 装修行业小规模纳税人标准
  • 一般纳税人认定表
  • 海关关税计算公式
  • 运费增值税税率有5吗
  • 未达起征点增值税能否开票
  • 房租雇东不开发票只有收据怎么处理?
  • 固定资产清理时残值怎么处理
  • 其他业务收入冲应收账款
  • 购置税发票如何下载
  • 企业垫付土地补偿款
  • 贷款公司收取服务费是诈骗吗
  • 联营商品如何做账
  • 资产的税务处理要注意什么
  • 提供境外服务
  • 企业所得税税收优惠方式有哪些
  • 免抵税额是否能抵销项税额呢?
  • 增值税普票丢失发票联能重开吗
  • 医院开发票需要税号吗
  • 广告设计制作的技术框架
  • 发了工资了
  • 加计抵减什么时候做账务处理
  • 企业预缴多交税了如何申请退税
  • 公司帮员工缴纳个税,不从工资里扣,如何做账
  • 年度报表申报错误,怎样更正
  • 分公司筹备方案
  • 哪些电子发票可以没有发票章
  • 小型微利企业在计提所得税时有哪些优惠政策
  • 收到工伤保险怎么做分录
  • 支付商品展览费计入
  • 回来报销差旅费的会计分录怎么写
  • 最新cpu天梯表
  • 为什么linux这么受欢迎
  • php扩展ffmpeg教程
  • framework怎么用
  • 语言翻译算法
  • 基于强化学习的智能机器人路径规划算法研究(附代码)
  • 性能优化有什么用
  • vue怎么打断点
  • 150讲轻松搞定python网络爬虫
  • 2023年会出什么车
  • 留抵退税税务总局规定的其他情形
  • 企业购进商品支付货款时,实际发生现金折扣,应计入
  • 工程施工预缴增值税
  • 应付票据帐务处理
  • 企业办理土地证需要哪些资料和手续
  • 树结构ADT知识点思维导图
  • 企业资产的范围
  • sql查看日志
  • 红字发票冲销的申请表是税务局开吗
  • 汇算清缴是什么
  • 营业外支出属于费用类科目吗
  • 机票的退票费会退到哪里
  • 成本类账户期末如有余额在借方
  • 职工基本医疗保险怎么用
  • 固定资产原值如何计算
  • 费用利润率的意思
  • 帮客户支付的机票计入什么科目
  • 一般纳税人原材料的入账价值怎么算
  • 建账需要准备什么东西
  • 图文详解管道支架制作安装标准
  • mysql数据库用户名和密码怎么查看
  • ubuntu x
  • 电脑cf截图保存在哪里
  • Linux使用scp命令进行文件远程的上传或下载
  • node.js gui
  • vue.js有什么用
  • 用jQuery的AJax实现异步访问、异步加载
  • java 调试
  • 法线贴图使用
  • android教学
  • unity打包后的程序闪退
  • android设计模式书籍
  • jq绑定事件的方法有哪些
  • 河北电子税务局开票流程
  • 安徽省工商总局
  • 重庆办理4050社保需要什么材料
  • 税务网上申报怎样操作
  • 通辽这个地方怎么样
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设