VML polar path tutorial (1) Introduction to VML
VML polar path tutorial (2) getting started with VML
VML polar path tutorial (3) Marking practice and line
VML polar path tutorial (4) oval circle rect rectangular
VML polar path tutorial (5) RoundRect circle shape
VML polar path tutorial (6) image
VML polar path tutorial (7) polyline multi-side
VML polar path tutorial (8) shape multiple sides. shapetype template. shape and curve
VML polar path tutorial (9) background of background
VML polar path tutorial (10) group collection container. vmlframe graphic reference
VML polar path tutorial (11) 2-level mark stroke border, shadow
VML polar path tutorial (12) VML programming finale
Background VML polar path tutorialOriginal: Mu Yuanhua1: background-Details
You may have been wondering how the yellow and white gradient backgrounds on the content pages of "VML polar path tutorial" are made? In fact, it is very simple. The background (webpage background control mark) mentioned in this chapter is used to complete this task.
Before explaining how to do this, please compare the following code differences and do not need to be memorized!
Example of parallel gradient filling: <HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY>
<Div style = 'height: 2000 '> </div>
<V: background fillcolor = "yellow">
<V: fill type = 'gradient' color2 = "purple"/>
</V: background>
Example of refraction gradient filling: <HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY>
<Div style = 'height: 2000 '> </div>
<V: background fillcolor = "white">
<V: fill type = 'gradientradial 'color2 = "red"/>
</V: background>
Example of parallel gradient + Angle Adjustment: <HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY>
<Div style = 'height: 2000 '> </div>
<V: background fillcolor = "white">
<V: fill angle = 50 type = 'gradient 'color2 = "yellow"/>
</V: background>
How is it? The third example is a bit similar, right? But not yet. See the following example.
Example of parallel gradient + Angle Adjustment + contrast and melting: <HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML );} </STYLE> <BODY>
<Div style = 'height: 2000 '> </div>
<V: background fillcolor = "white">
<V: fill angle = 50 type = 'gradient' colors = "50% # f1f0c7"/>
</V: background>
OK. The fourth example is finally implemented! Looking back at the above four examples, one conclusion is that the code is "similar ". In addition, the VML second-level mark-fill (fill) is used, while the background mark itself only has the id and fillcolor attributes, which cannot implement background gradient and must be used with the second-level mark-fill. The second-level tags (fill filling processing, stroke border processing, extrusion three-dimensional processing, etc.) are often the same as common attributes, it is not specially designed for a certain level-1 mark (oval circle, roundrect circle rectangle, line, background, etc.), but can be applied to multiple level-1 marks, affects the graphic effect of the output or representation of a level-1 mark.
At present, there is no time to talk about the second-level mark. This chapter only requires you to briefly understand the syntax of the second-level mark, learn more about VML's powerful graphic effect processing functions and the rich attributes of level 2 tags! And knowing that the background is used in this way, it completes the gradient effect of the webpage background color. In the above 4 codes, <div style = 'height: 2000 '> </div> is not required, in the example 4, it is used to lengthen the webpage length and better display effect.
The second-level mark stroke border processing and fill filling processing will be described in detail in subsequent chapters. After that, you can apply the level-2 tag to the level-1 tag to achieve various graphic processing effects.
Blog Source: http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763237.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
