如何在html元素上实现水平和垂直渐变

Question

有人能指出我如何使用css中的任何mozilla渐变属性将渐变实现为仅 html div元素的顶部，底部和右侧？ 如果我使用-moz-linear-gradient属性进行垂直渐变，我会错过要在div元素右侧应用的渐变。

Answer 1

我不是100％确定这是你想要的，但你可以在目标div元素中嵌套div元素，在一个中设置一个水平渐变，在另一个中设置一个垂直渐变。然后，将嵌套div元素的不透明度更改为50％。

编辑：This边缘有点粗糙，但这适用于Firefox。请注意，您不能将子元素的不透明度更改为高于父不透明度的值。儿童不透明是相对的，而不是绝对的。

Answer 2

这可以归功于CSS3。只需将垂直和水平渐变放在一起，并用逗号隔开即可。

例如，创建此漂亮的背景 我正在使用此代码：

background: linear-gradient(to bottom, #80d0b9 0%,#80d0b9 30px,#e7f3f3 30px,#e7f3f3 100%) no-repeat top left,
            linear-gradient(to right,  #c2ebec 0%,#c2ebec 30px,#e7f3f3 30px,#e7f3f3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-size: 30px 100%;

Here is a demo