Webpage standardization: CSS makes multi-layer overlapping gradient

Some time ago, the customer sent a website effect diagram. Because the customer is a graphic design engineer and has no experience in making webpages, the effect diagram uses a large number of gradient colors, and multiple layers overlap, as a result, the entire cut graph cannot be performed, so you have to consider using the CSS style.
Based on the effect chart, the author roughly simulates a two-layer gradient overlapping effect chart, as shown below:
Figure 1
Figure 1 uses two layers of gradient. The first layer is the gradient from top to bottom. The size is 200px * 200px, and the color transitions from #111111 to # dddddddd, the second layer is the gradient from left to right. The right side is aligned with the gradient of the first layer. The size is 30px * 200px, the color transitions from # aaaaa to #222222, and the transparency is 40%, we can find that, because the second layer gradient includes transparency, the color above is much deeper than the color below. However, you need to cut the entire image into one.
First, let's take a look at this CSS filter:
FILTER: progid: DXImageTransform. Microsoft. Gradient
Syntax:
Filter: progid: DXImageTransform. Microsoft. Gradient (enabled = bEnabled, startColorStr = iWidth, endColorStr = iWidth)
I will not talk about the specific attributes. If you are interested, you can search the style sheet filter Chinese manual of Su Xiaoyu on the Internet.
Specific implementation code:

The code is as follows:

Copy code

<Style> . ADiv { Position: absolute; Top: 0px; Left: 0px; Width: 200px; Height: 200px; Z-index: 1; Filter: progid: DXImageTransform. Microsoft. Gradient (startColorStr = "# ff111111", endColorStr = "# ffdddddd", gradientType = "0 "); } . BDiv { Position: absolute; Top: 0px; Left: 170px; Width: 30px; Height: 200px; Z-index: 2; Filter: progid: DXImageTransform. Microsoft. Gradient (startColorStr = "#66 aaaaaa", endColorStr = "#66222222", gradientType = "1 "); } </Style> <Div class = "aDiv"> </div> <Div class = "bDiv"> </div>