渐变是css3新增的吗-前端问答-PHP中文网

一、简介

二、线性渐变

三、径向渐变

四、总结

首页

web前端

前端问答

渐变是css3新增的吗

青灯夜游

Dec 14, 2021 pm 05:49 PM

css3 渐变

渐变是css3新增的图片类型，用来代替图片。CSS3定义了两种类型的渐变：1、线性渐变，使用“linear-gradient()”函数定义；2、径向渐变，使用“radial-gradient()”函数定义。

渐变是css3新增的吗

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

作为CSS3新增的属性，渐变也有着无穷的潜力。

一、简介

渐变是CSS3新增的图片类型，用来代替图片，它的好处有：

加快页面的加载速度，减少带宽的占用；
更加灵活。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

二、线性渐变

其实渐变的使用也挺常见的，例如导航栏：

background-image: linear-gradient(90deg,#0af,#0085ff)

登录后复制

很显然，这比纯色的背景好看太多了。

当然，有时间我们并不需要过渡效果：

    background-image: linear-gradient(90deg,blue 100px,#FFF 100px,#FFF 200px,red 200px);

登录后复制

对于线性渐变，除了linear-gradient，还有repeating-linear-gradient：

    $c1: #fff;
    $c2: #DF5646;
    $c3: #1C78A4;
    background-image: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 40px, $c1 40px, $c1 50px, $c3 50px, $c3 80px);

登录后复制

由此可见，渐变并没有那么简单。

这里肯定有人要问，还能玩出什么花样？首先我们要明白渐变是一种图片，那么再想想还有什么与图片一起使用的CSS属性？

    $color: #122556;
    background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%),
                      linear-gradient(-45deg, $color 25%, transparent 25%, transparent 75%, $color 75%);
    background-size: 30px 30px;

登录后复制

通过这个例子，是不是使用渐变的思路更加开阔了。不过这里还需要注意一点：

当你声明多个渐变时，最先声明的，离用户越近。（这里就需要我们考虑遮盖的问题，一般采用transparent）；

同样，渐变也可以做动画

    @mixin menuaction($color) {
        background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom / 100% 10%;
        &:hover {
            background-size: 100% 100%;
            color: #fff;
        }
    }

登录后复制

三、径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

登录后复制

值	描述
shape	确定圆的类型: ellipse (默认): 指定椭圆形的径向渐变。 circle ：指定圆形的径向渐变
size	定义渐变的大小，可能值： farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner ：指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置。可能值： center（默认）：设置中间为径向渐变圆心的纵坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, ..., last-color	用于指定渐变的起止颜色。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */
}

#grad2 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>径向渐变 - 形状</h3>

<p><strong>椭圆形 Ellipse（默认）：</strong></p>
<div id="grad1"></div>

<p><strong>圆形 Circle：</strong></p>
<div id="grad2"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

登录后复制

渐变是css3新增的吗

四、总结

最后以什么结束呢，哈哈最近各种优惠券，那我们用渐变的知识来搞张优惠券吧：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 300px;
				height: 120px;
				background: radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat,
					radial-gradient(#fff 0, #fff 10px, rgb(247, 245, 201) 10px) no-repeat,
					radial-gradient(#fff 0, #fff 10px, rgb(247, 245, 201) 10px) no-repeat,
					linear-gradient(90deg, transparent 10px, rgb(247, 245, 201) 10px);
				background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 60px 60px, 60px 60px, 100% 100%;
				background-position: -10px 0, -10px 20px, -10px 40px, -10px 60px, -10px 80px, -10px 100px, 60px -30px, 60px 90px, left center;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

登录后复制

（学习视频分享：css视频教程）

以上是渐变是css3新增的吗的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7540

CakePHP 教程

1381

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

纯CSS3怎么实现波浪效果？（代码示例） Jun 28, 2022 pm 01:39 PM

纯CSS3怎么实现波浪效果？本篇文章就来给大家介绍一下使用 SVG 和 CSS 动画制作波浪效果的方法，希望对大家有所帮助！

巧用CSS实现各种奇形怪状按钮（附代码） Jul 19, 2022 am 11:28 AM

本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮，希望对大家有所帮助！

css怎么隐藏元素但不占空间 Jun 01, 2022 pm 07:15 PM

两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。

实例详解CSS渐变锯齿问题如何解决！ Nov 25, 2022 pm 04:43 PM

本篇文章给大家介绍一下如何解决在使用渐变图形产生的锯齿问题，所谓CSS渐变锯齿消失术，你会了就能搞定，下面就带大家一起来看看怎么实现吧~希望对大家有所帮助！

css3怎么实现花边边框 Sep 16, 2022 pm 07:11 PM

在css中，可以利用border-image属性来实现花边边框。border-image属性可以使用图片来创建边框，即给边框加上背景图片，只需要将背景图片指定为花边样式即可；语法“border-image: url(图片路径) 向内偏移值图像边界宽度 outset 是否重复;”。

原来利用纯CSS也能实现文字轮播与图片轮播！ Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

css3如何实现鼠标点击图片放大 Apr 25, 2022 pm 04:52 PM

实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

ps渐变工具怎么用-ps渐变工具的使用方法 Mar 05, 2024 pm 06:28 PM

ps软件是很多人办公中会使用到的软件，那么各位知道ps渐变工具怎么用吗?下文就是小编为各位带来的ps渐变工具的使用方法，感兴趣的用户快来下文看看吧。1.打开或创建一个新的文档：首先，打开Photoshop软件并创建一个新的文档，或者打开已有的图像文件。选取渐变工具：在工具栏的左侧，定位渐变工具（位于矩形选框工具和油漆桶工具之间），然后点击以选中。3.设置渐变类型：在工具选项栏中，你可以选择不同的渐变类型。有线性渐变、径向渐变、角度渐变等选项可供选择。点击渐变类型下拉菜单，选择你想要的渐变类型。4

See all articles

渐变是css3新增的吗

一、简介

二、线性渐变

三、径向渐变

四、总结

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题