linear-gradient是CSS中用于创建线性渐变背景的函数。它允许你定义两种或多种颜色之间的平滑过渡,这些颜色会沿着一条直线均匀分布。线性渐变的方向可以是水平、垂直,或者任意角度。 在linear-gradient中使用透明色 在linear-gradient中,你可以使用透明色(transparent)作为渐变的一部分。透明色在这里意味着该部分的颜色将不...
其实还可以用repeating-conic-gradient优化一下(原理是一样的,所以归为同一种方法),后面两个颜色是前面两个重复而来,所以可以只用两个颜色实现 .bg{width:400px;height:300px;background-image:repeating-conic-gradient(#eee025%,transparent050%);background-size:16px16px;} 这应该算的上是纯 CSS 方案中最...
如果不加这个属性,就成了横条纹了,以此90deg就是竖条纹,可以组成花格条纹。 分析后面8个属性,总结出是由一个rgba颜色值和transparent外加百分比组成。 rgba颜色值是条纹的颜色,transparent其实也是颜色,不过是继承自父级的,而这里的父级颜色就是body的背景色(在这块代码里可以理解为无色透明≈rgba(0,0,0,0))。
实现思路很简单，利用线性渐变实现背景的黑色线条，通过位置控制线条的粗细。h2 { text-align:center; line-height:50px; background:linear-gradient( transparent 49%,#00049%,#00051% ,transparent 51%); span{ padding:010px; background:#fff; } } 发散思考 你之前的场景是如何实现...
切角效果 1、单个切角 1 background: linear-gradient(-45deg, transparent 15px, #58a 0); 1 background: linear-gradient(-45deg, transparent 15px, #58a 0); 1 backgr
transparent 作为为渐变色的第一个参数,也就是 0% 时的颜色为完全透明色: background-image: linear-gradient(transparent 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.10)) linear-gradient 格式: linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) ...
background: linear-gradient(transparent, rgba(0, 0, 0, 0.5)); } ``` 在上面的例子中,使用linear-gradient函数的参数来定义了一个从完全透明到50%透明黑色的线性渐变背景。 需要注意的是,linear-gradient函数还可以接受其他类型的参数来进一步定义渐变的形状和样式。例如,可以使用关键字(如to top)指定渐变的...
.linear-gradient--transparent { background-image: linear-gradient( to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1) ); } /* 重复线性渐变 */ .repeating-linear-gradient { background-image: repeating-linear-gradient(red, yellow 10%, green 20%); ...
repeating-radial-gradient(transparent, deepskyblue 40px); repeating-conic-gradient(transparent, deepskyblue 40deg); 1. 2. 3. 起止颜色位置需要明确定义 【实战】条纹边框 .stripe-border { width: 150px; height: 200px; border: 20px solid;
background:linear-gradient( transparent 49%,#00049%,#00051% ,transparent 51%); span{ padding:010px; background:#fff; } } 发散思考 你之前的场景是如何实现的? 我之前的场景的话,也是类似的思路不过是利用的一个线性背景做x方向的重铺,然后中间也是用span标签做白色背景。