                        课程
                    
                        /前端开发
                        
                            /Bootstrap
                        
                        /玩转Bootstrap（基础）

请大神帮忙详细解释以下代码的意思

background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);

三体之殇

2016-04-03

源自：玩转Bootstrap（基础） 7-10

关注问题我要回答

1146

操作

收起

4 回答

qq_小魔女_2
2016-12-07

参考：http://www.th7.cn/web/html-css/201309/12824.shtml

这是css3提供的线性渐变，第一个参数代表开始渐变的角度，后面几个参数代表的是渐变的颜色，以及渐变颜色对应的截止位置。

虽然都是透明或者白色渐变，但是仍然能出现彩色渐变，透明渐变设置的作用域是在父级元素设置progress-striped的情况，彩色进度条的彩色是因为底色的颜色是通过单纯的progress-bar-danger等几类的本身的background-color 决定，与父级元素无关

0 回复有任何疑惑可以回复我~

收起回答

学习的博士
2016-04-05

兼容性代码 -webkit-******* 等同于 linear-gradient

CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 CSS3 Gradient，我们需要先了解一下目前的几种现代浏览器的内核，主要有 Mozilla（Firefox，Flock等）、WebKit（Safari、Chrome等）、Opera（Opera浏览器）、Trident（讨厌的IE浏览器）。