background: linear-gradient(direction, color-stop1, color-stop2, ...); 线性渐变 - 从上到下(默认情况下) 下面的实例演示了从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色: 实例 从上到下的线性渐变: #grad{background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */background:...
background-image:linear-gradient(45deg,red,blue);// 从左下角到右上角 #04. 多个连续配置 background-image: linear-gradient(45deg, #e66465 25%, transparent 25%), linear-gradient(-135deg, #e66465 25%, transparent 25%), linear-gradient(135deg, #e66465 25%, transparent 25%), linear-gra...
观察发现鼠标放上去的时候出现了三个变化,渐变背景,文字位移和图片放大。 渐变背景:background-image: linear-gradient(transparent,rgba(0, 0, 0, .6)); // 从transparent白色到0.6透明度的黑色。默认情况下背景遮罩不显示(opacity:0),hover的时候定位到盒子上(opacity:1) 文字位移:transform:translate(0,80px) ...
background-image: linear-gradient(45deg,#55efc4,#a29bfe,linear-gradient( #d63031,#e84393); 第二个渐变并没有出现,这是因为第一个渐变是从0-100%的,占满了整个元素,所以第二个没有出现。 「正确示例,使用transparent」 使用transparent *%;的方式来将部分空间来透明化,从而显示其他渐变。 background-i...
1线性渐变(Linear gradient) 2 径向渐变(Radial gradient) 3 角向渐变(Conic gradient) 4 多重渐变(Repeating gradient) 三、css 中的渐变色 1. 定义 <gradient>是 CSS 数据类型<image>中的一种,用于表现两种或多种颜色的过渡转变。[1] 在浏览器渲染的时候,<gradient>被解析为图形,所以它可以应用在 backgrou...
linear-gradient(to top, transparent, #b1b1b1 100%), gray repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 255, 255, 0.5) 35px, rgba(255, 255, 255, 0.5) 70px); background-clip: padding-box; border-left: 1px solid rgba(255, 255, 255, 0.3); ...
background: repeating-linear-gradient(#fb3, #fb3 20%, #58a 80%, #58a 100%); 其他条纹背景以及缺角背景的实现 效果图: 效果图 代码示例: 图一: background: linear-gradient(0, rgba(200, 0, 0, 0.5) 50%, transparent 0), linear-gradient(90deg, rgba(200, 0, 0, 0.5) 50%, transparent...
linear-gradient 是CSS3中一个重要的属性,初看觉得很简单,但是别看它简单,它能实现很多复杂的图形。 代码还是比较简单的: linear-gradient(65deg,#2b7ce7,#2b7ce7 50%,transparent 0,transparent),linear-gradient(115deg,#2b7ce7,#2b7ce7 50%,transparent 0,transparent) ...
a{background:linear-gradient(90deg,#0cc50%,transparent50%,transparent 1px);background-size:10px 2px;background-repeat:repeat-x;background-position:100%100%;} CodePen Demo -- 使用 background 模拟下划线与虚线下划线 当然这个是最基础的,巧妙的运用background的各种属性,我们实现各种有意思的效果。
CSS3线性渐变(默认从上到下) 语法:#grad{background-image:linear-gradient(#e66465, #9198e5);} 从左到右:#grad...:linear-gradient(color1, color2, color3); }使用透明度(transparent) 从左到右的线性渐变,带有透明度:#grad {background-image ...