外链论坛

 找回密码
 立即注册
搜索
查看: 5|回复: 0

聊一聊CSS3的渐变——gradient

[复制链接]

709

主题

0

回帖

9997万

积分

论坛元老

Rank: 8Rank: 8

积分
99978119
发表于 6 天前 | 显示全部楼层 |阅读模式

关于渐变

时下,渐变(gradient)效果在页面设计中已然变得越来越平常了。况且此刻的CSS3针对渐变的支持已然足够的丰富了。虽然咱们可能运用过CSS3中的line-gradient属性或radial-gradient属性,但其实CSS3中的渐变功能比咱们想象的要强大的多,加以利用会实现非常多有趣好玩的东西。本文就来讨论CSS3中的渐变。

taobao首页的按钮和导航栏都运用了css渐变

基本语法

倘若你之前运用过CSS3的渐变,针对下面的CSS代码必定有所认识

<div class="gradient_bg"> </div> <style> .gradient_bg { bac公斤round-image: linear-gradient(gold, #FF837E); height: 84px; width: 100%; } </style>

他的运行结果如下:

这是一个由上到下、由金色到粉色的渐变色块

linear-gradient()办法的语法看上去还是很清晰的——从某个颜色渐变到另一个颜色。

然则倘若要实现下面的几种渐变效果该怎样做呢?

这个是由于左到右渐变的色块,并且渐变过程只出现在中间一小部分内
这个是由于中心向外渐变的色块
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|外链论坛 |网站地图

GMT+8, 2024-7-6 16:47 , Processed in 0.097777 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.