“传统的”仅仅改变linear-gradient第一个参数——角度值的方式或者通过background-size增加“精确度”的方式都不能有效的达到真正意义上完美的倾斜背景:它们总是会在大小改变或者换一个倾斜度时把整个图案搞乱! 幸运的是,我们还有更好的方法来创建斜向条纹:一个鲜为人知的真相是 linear-gradient() 和 radial-gradi...
background-image: radial-gradient(100px at center, yellow, green); } /*中心点在左上角*/ div:nth-child(3) { background-image: radial-gradient(at left top, yellow, green); } div:nth-child(2) { background-image: radial-gradient(at 50px 50px, yellow, green); } /*设置不同的颜色...
linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat; background-size: 6px 1px, 1px 6px, 6px 6px; transform: rotate(-45deg); left:-4px; top:13px; ...
radial-gradient(circle at center right, transparent 15px, #58a 0) bottom right; background-repeat: no-repeat; background-size: 50% 50%; 不断实验的话,能够发现更多更好玩的形状。 补充一个线性渐变的使用场景,自定义文字下划线: 1 在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是...
background:radial-gradient(at top,rgba(0,0,0,.2),transparent70%) no-repeat;background-size:100%15px; 现在,当我们滚动列表时,这条阴影会一直停留在相同的位置。这正是背景图像的默认行为:它的位置是相对于元素固定的!不论元素的内容是否发生了滚动。这一点也适用于 background-attachment: fixed 的背景...
background-repeat: no-repeat; } .box { background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0 / 2em 2em, linear-gradient(-135deg, transparent 1.4em, #58a 0); } .pox { background: linear-gradient(to left bottom, transparent 50%,...
.box1,.box2{display:inline-block;width:400px;height:400px;margin:60px;}.box1{width:800px;height:480px;background:linear-gradient(to left,transparent50%,red),url("https://s2.loli.net/2022/03/09/8OjEFf5GQy6iTcm.png")no-repeat;background-size:800px;}.box2{width:800px;height:480px...
原因是:忘记把background-repeat关掉了,因此每层渐变图案各自平铺了两次。代码仍需要改进: background:linear-gradient(-45deg,transparent 15px,#ace 0)right,linear-gradient(45deg,transparent 15px,#F8E2EB 0)left;background-size:50% 100%;background-repeat:no-repeat; ...
CSS3中惊艳的gradient 一、stop位置 stop位置,也就是开始渐变的位置。 1)stop位置不同 将会出现过渡的效果,#fb3开始渐变的位置是20%,在20%之前就只有#fb3,到80%就是#58a。 div.transition1 { background: linear-gradient(#fb3 20%, #58a 80%); } ...
background: linear-gradient(#fb3 50%, #58a 0); } 1. 2. 3. 4) 通过设置0,实现条纹色 #fb3的起始渐变是33.3%,给第二个颜色#58a设置为0,使得两个颜色之间没有间隔,第三种颜色yellowgreen设置为0,后面的就全部显示这个颜色。 div.transition4 { ...