backgroundLinearGradient线性渐变，制作折角效果

语法

线性渐变 - 从上到下（默认情况下）

background: linear-gradient(direction, color-stop1, color-stop2, ...);

制作折角效果

background: linear-gradient(45deg, rgb(120, 120, 120) 0%, rgb(120, 120, 120) 50%, rgb(52, 52, 52) 50%, rgb(34, 34, 34) 61%);

效果如下

实例1

从上到下的线性渐变，由红色渐变到蓝色

.box{background: linear-gradient(red, blue);
}

实例2

从左到右的线性渐变，由红色渐变到蓝色

```
.box{background: linear-gradient(to right, red, blue);
}
```

实例3

使用角度, 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

    ```.box{background: linear-gradient(45deg, red, blue);}```

使用多个颜色结点

.box{background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

backgroundLinearGradient线性渐变制作折角效果相关推荐

纯CSS实现圆角阴影的折角效果
纯CSS实现圆角阴影的折角效果 2016-10-04 13:14 网页设计标签:css 1637 2 把元素的一角处理类似折角的形状,再配上或多或少的修饰,这种效果已经成为一种非 ...
CSS3实现精美的纸张折角效果 -- 进阶版
改变的要素昨天那个CSS3实现折角,需要到纯色背景下才能比较完美,今天就遇到问题了-背景是渐变的;所以改良一下; 适用于任何背景,控制::before和::after 两个案例,第一个是适用于任何背 ...
html中背景条纹效果,使用CSS线性渐变制作条纹背景
主要使用的属性 linear-gradient background:linear-gradient(#000,#ccc); Paste_Image.png 取消中间的渐变过度 background: ...
利用颜色线性渐变实现-透明玻璃效果按钮
透明玻璃效果按钮效果图: 1. 使用颜色线性渐变设置绘制刷子: QRectF button_rect = this->geometry(); QLinearGradient gradient(0 ...
基于一段神奇的CSS渐变制作噪点效果
提及噪点效果,首先想到的就是以前的旧电视机信号不稳定时或者画面不稳定时的效果.如果你没有看过那种旧电视,可以看下面的gif动图,真实的情况噪点的变化速度会快很多,这里为了gif的大小,截取的时间较短供 ...
CSS3 渐变: 线性渐变 linear-gradient 和径向渐变 radial-gradient
渐变背景也是CSS3 的新特性,通过它可以在不使用图像的情况下,创建从一种颜色到另一种颜色的过渡.使用渐变的好处是,可以减少对图像的依赖,进而降低浏览网页时的带宽消耗,提高网站的访问速度. 渐变,就是 ...
css3切角文本框_CSS3+jQuery制作切角的Tabs
今天在Red阅读了一篇<CSS3 tabs with beveled corners>博文,介绍了使用CSS3制作切角的Tabs,觉得特有意思.其中含量最高的并不是其如何实现的Tabs,而 ...
CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
html中切角文本框,css实现切角效果
1. 一个切角思路:如果我们要得到有一个切角的元素,我们只需要使用一个径向渐变就可以达到这个目标,这个渐变需要把一个透明色标放在切角处,然后再相同的位置设置另一个色标,并且把它的颜色设置成我们想要的 ...

backgroundLinearGradient线性渐变制作折角效果

backgroundLinearGradient线性渐变，制作折角效果

语法

制作折角效果

实例1

实例2

实例3

使用多个颜色结点

backgroundLinearGradient线性渐变制作折角效果相关推荐

最新文章

热门文章