CSS3之渐变（1）

所谓渐变，实际是设置两种或两种以上颜色的平滑过渡效果。本文介绍如何利用CSS进行元素渐变颜色的设置。

CSS设置的渐变效果主要分两种类型，分别是线性渐变和径向渐变。本文主要介绍线性渐变。源代码如图，以此进行演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>渐变色使用</title><style>div {width: 400px;height: 400px;margin: 100px auto 0;background-image: linear-gradient( #ccc, skyblue);}</style>
</head><body><div></div>
</body></html>

通过background-image:linear-gradient()进行设置，参数需要设置渐变方向和渐变颜色

(1)不设方向，默认为由上至下

            background-image: linear-gradient( #ccc, skyblue);

效果如图

（2）设置上下左右任一方向，以朝左为例

            background-image: linear-gradient(to left, #ccc, skyblue);

效果如图

（3）设置对角方向，以朝右下为例

            background-image: linear-gradient(to right bottom, #ccc, skyblue);

效果如图

（4）设置任意角度，以deg为单位，以元素中心点为顶点，以由该顶点出发竖直向上的射线为始边，该角度的终边即为渐变的方向。顺时针角度为正，逆时针为负。以45度为例演示

            background-image: linear-gradient(45deg, #ccc, skyblue);

效果如图

（5）设置透明度渐变，以蓝色渐变为例

            background-image: linear-gradient( rgb(135, 206, 235, 0), rgb(135, 206, 235, .5), rgb(135, 206, 235, 1));

效果如图

CSS3之渐变（1）相关推荐

CSS3技巧：利用css3径向渐变做一张优惠券（转）
在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...
在html中怎么写背景色渐变,css3背景色渐变
css3背景色渐变难是不难,就是麻烦.不同浏览器用法不同,还有个爱掺和的ie... 一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ...
超多的CSS3圆角渐变网页按钮
<!DOCTYPE html> <head> <title>超多的CSS3圆角渐变按钮</title> <style type="tex ...
CSS3彩色渐变的电脑键盘js特效
下载地址 CSS3彩色渐变的电脑键盘特效是一款键盘网页特效. dd:
html css径向渐变,如何实现css3径向渐变如何定义中心和大小形状
如何实现css3径向渐变如何定义中心和大小形状发布时间:2020-07-13 16:23:57 来源:亿速云阅读:249 作者:Leah 如何实现css3径向渐变如何定义中心和大小形状?很多新手对 ...
css 文字颜色渐变 animation,css3文字渐变动画
这次给大家带来css3文字渐变动画,实现css3文字渐变动画的注意事项有哪些,下面就是实战案例,一起来看一下. 利用css3这个属性(背景剪裁): background-clip: border-bo ...
CSS3 线性渐变循环动画
CSS3 线性渐变循环动画最近开发,遇到一个首屏加载优化的情况,需要如下图的线性渐变动画: 网页动态效果 (http://htmlpreview.github.io/?https://github. ...
html好看的渐变效果,CSS3实现渐变/立体/扁平的漂亮按钮
网页UI设计追求精美漂亮,除此之外,实现代码也越趋于简单易用.本文就介绍如何用CSS3实现渐变/立体/扁平的漂亮按钮,代码简单易用,但是效果却是十分之好. CSS3实现渐变/立体/扁平的漂亮按钮按钮 ...
聊一聊CSS3的渐变——gradient
关于渐变时下,渐变(gradient)效果在页面设计中已经变得越来越常见了.而且现在的CSS3对于渐变的支持也已经足够的丰富了.虽然我们可能使用过CSS3中的line-gradient属性或radi ...
css伪类渐变,CSS3文字渐变内发光投影效果_css
前阵子做了个css3文字效果,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考.发个效果图大家看先: 投影shadow box-shadow 一般我们都是用css3的box-sh ...

CSS3之渐变（1）

CSS3之渐变（1）相关推荐

最新文章

热门文章