来帮同学解答一个问题
章节
问答
课签
笔记
评论
占位
占位

CSS3颜色 渐变色彩 

CSS3 Gradient 分为线性渐变(linear)径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

这一小节我们来说一下线性渐变:

 

参数:

第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:

(单击图片可放大)

第一个参数省略时,默认为“180deg”,等同于“to bottom”。

第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

效果图:

任务

在下列代码中的第14行,为文字段落添加从右下角向左上角的线性渐变背景

?不会了怎么办

表示“角”的关键词是否书写正确

||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / ylhssn
可以,效果是一模一样的<...图片...>

已采纳回答 / 慕先生7352805
它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse第一个去掉center就可以了,第二个由于是默认值,所以把ellipse  center去掉就好了

最赞回答 / qq_故人事_0
linear-gradient(-45deg, rgba(255, 50, 245, .9), rgba(130, 255, 180, .8))

最赞回答 / qq_依旧如此_03653398
background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);径向渐变不可以设置方向  但是可以设置尺寸

已采纳回答 / 广东轻院信息_142_13文武
radial-gradient(red,green)中心颜色,结束颜色可以多个

已采纳回答 / qq_欣仔_0
分别是:红 橙 黄 绿 蓝    indigo靛   violet紫

最新回答 / theta129
哪种颜色啊?用英文不行的话可以试一下用RGB或者16进制表示啊

已采纳回答 / 茶白
到左上角应该是to top leftbackground-image:linear-gradient(to top left,red,orange,yellow,green,blue,indigo,violet);} 希望帮助到你!

已采纳回答 / LonelyAscetic
background-image:radial-gradient(to top left,red,orange,yellow,green,blue,indigo,violet)兄弟,径向就是圆形的啊,不用加方向了。不是线性渐变。。

最赞回答 / 古月风3584153
你把  box-shadow:20px,20px,20px,red;改成box-shadow:20px 20px 20px red;就行了。

最新回答 / 洞悉天下
能行的,测试成功就说明行

最新回答 / 甜甜圈1991
background: radial-gradient(#ace, #f96, #1E90FF);更多可点击查看: http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html

最新回答 / zhangcl
和颜色相关的应该都可以吧
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言