您现在的位置是：网站首页> 编程资料编程资料

通过css3背景控制属性+使用颜色过渡实现渐变效果css3实现背景动态渐变效果css3 给背景设置渐变色的方法用CSS3实现背景渐变的方法CSS3实现渐变背景兼容问题

2021-09-03 804人已围观

简介 这篇文章主要介绍了css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果,非常不错，本文通过实例代码效果图展示的非常详细，需要的朋友可以参考下

css3背景图像相关

兼容性：IE9+

background-clip 背景图片绘制区域

background-clip:border-box; 内容区

Document

background-clip:padding-box; padding区域

Document

background-clip:border-box; border区域

Document

background-origin: content-box | padding-box | border-box; 背景图片起始位置

背景图片从border-box开始水平垂直向下偏移50px

Document

背景图片从padding-box开始水平垂直向下偏移50px

Document

背景图片从content-box开始水平垂直向下偏移50px

Document

background-size: 填写数值或者百分比时，如果只填写一个值，另一个值默认为auto

cover 等比缩放填满容器

contain 等比缩放至一边碰到容器边

Document

多重背景图片

background-image:url(),url();

前面的图片会覆盖后面的图片

Document

颜色设置为透明：transparent

css3渐变

兼容性：IE10

Document

正常情况下线性渐变的角度

webkit内核下线性渐变的角度

解决方法：兼容浏览器的前缀按顺序书写，正常情况下无前缀的放在最后

颜色可以具体分配位置

第一个颜色不写默认是0%的位置；最后一个颜色默认是100%的位置

Document

rgba() 可以设置带透明色的渐变

Document

重复渐变

repeating-linear-gradient

Document

径向渐变 radial-gradient

Document

保持圆形渐变

Document

尺寸大小 closest-side closest-corner farthest-side farthest-corner

Document
closest-side
closest-corner
farthest-side
farthest-corner

设置渐变的圆心位置

水平方向为宽度的10%，垂直方向为高度的20%

Document
closest-side
closest-corner
farthest-side
farthest-corner

repeating-radial-gradient 重复径向渐变

Document

IE浏览器渐变

IE10+ 支持gradient 渐变

IE6-8 使用filter

Document

使用IE控制台可切换IE浏览器版本

IE filter

0 从左到右线性渐变

1 从上到下线性渐变

实际案例：

Document