位置: 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怎么用)

  • 个人所得税清算怎么操作
  • 营业额超500万会罚款吗
  • 增值税发票勾选平台
  • 海关完税凭证是交给海关么
  • 收到营业外收入流水账怎么做账
  • 个人申请代开发票流程怎么操作
  • 会议费发票能抵扣吗
  • 为什么社保明细少一个月
  • 作废的发票还需要保存吗
  • 成立日期是注册日期吗
  • 单位发放中秋月饼价值有规定吗
  • 房产税的纳税义务
  • 给客户提供的价值
  • 开票金额大于收款金额如何处理
  • 预缴物业费是否符合法律规定
  • 销售货物或者提供应税劳务、服务清单怎么开
  • 代扣代缴增值税是什么意思
  • 汇算清缴所得税退回做账
  • 工薪个人所得税扣除
  • 员工的家庭
  • 财产租赁所得适用什么税率
  • 上报汇总之后怎么申报
  • 筹建期水电费计入什么科目
  • 小微企业所得税税率2.5% 10% 25%
  • 六税两费包括哪三税
  • 研发费用直接投入占比过高税务预警
  • 个体户能给自己交五险吗
  • 已计提月份的公式
  • 年初未分配利润是什么科目
  • 应收账款记账凭证如何填写
  • 发放股票股利的会计分录怎么写
  • 申请一般纳税人公司流程
  • 销售过程的主要内容
  • 小规模纳税人的个人所得税怎么算
  • 一文读懂谢娜张杰购房跳单事件始末
  • laravel ajax
  • 当深度学习遇上Web开发:Spring和OpenAI如何实现图片生成?
  • javascript最好的教程
  • ml神经网络
  • 关于成本核算的论文题目
  • 个税多计提了账务处理
  • 个体经营所得可以用投资人申报吗
  • BootStrap--selectpicker的使用
  • 高铁票进项抵扣计算错了 怎么办理
  • 什么情况企业需要调档
  • sqlserver数据库作业
  • 交易性金融资产公允价值变动怎么算
  • 个人独资企业需要缴纳哪些税种
  • 取得其他权益工具投资发生的交易费用
  • 资产负债表和科目余额表怎么核对
  • 租房公司报销发票怎么开
  • 法人代表可以兼任出纳吗
  • 业务招待费算期间费用吗
  • 发票专用章盖在中间行不行
  • 应收账款周转天数越大说明什么
  • mysql5.7重装
  • mysql5.5安装配置教程
  • sql中的存储过程
  • linux系统密码设置
  • windows8.
  • linux系统监控软件
  • win7系统运行速度提升
  • 重装win7系统后鼠标键盘不能用
  • jQuery的ajax中使用FormData实现页面无刷新上传功能
  • python利用matplotlib将扇形平分成50份
  • python过程中遇到的问题
  • 能用javascript 最终
  • ShareSdk实现第三方分享功能
  • js怎么学扎实
  • js 对象key
  • 河北省国家税务局长简介
  • 公共配套设施如何计算成本
  • 浙江 国家地理
  • 国家税务认证平台是什么
  • 安徽省各地区最低录取中考分数线
  • 互联网服务业有哪些行业
  • 2013年报废车流程
  • 湖南职工医保哪里交
  • 收缴和缴纳的区别
  • 开原航天医院官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设