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

css3背景图像相关

兼容性：IE9+

background-clip 背景图片绘制区域

background-clip:border-box; 内容区

background-clip:padding-box; padding区域

background-clip:border-box; border区域

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

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

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

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

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

cover 等比缩放填满容器

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

多重背景图片

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

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

颜色设置为透明：transparent

css3渐变

兼容性：IE10

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

webkit内核下线性渐变的角度

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

颜色可以具体分配位置

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

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

重复渐变

repeating-linear-gradient

径向渐变 radial-gradient

保持圆形渐变

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

提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                

                

                

                                            
上一篇：CSS3动画特效在活动页中的应用css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
                                                                
下一篇：CSS3中新增的对文本和字体的设置css渐变色彩 省略标记 嵌入字体 文本阴影全面了解CSS 文本字体颜色设置方法(CSS color)CSS 有序或者无序列表的前面的标记 list-style-type 属性的实现CSS如何设置列表样式属性(看这篇文章就够用了)CSS字体、文本、列表属性详细介绍