非常好的东西，有助于学习css虑镜，转msdn [3]

领测软件测试网 <SPAN BGCOLOR="#DDDDDD" style="BACKGROUND: #dddddd; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; HEIGHT: 35px; LEFT: 300px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; POSITION: absolute; TEXT-ALIGN: center; TOP: 419px; WIDTH: 500px; background-image:  url(copybg.gif); background-repeat: no-repeat">
  <BUTTON STYLE="margin-top:3; margin-bottom:3;" onclick="copy2Clipboard();">
    Copy Code to Clipboard
  </BUTTON>
</SPAN>

<SPAN ID="filterSection" isSource=TRUE STYLE="display:none">
<B>Select a filter:</B><BR>
<SELECT ID="oSelect" onchange="changeFilter()">
<OPTION VALUE="empty" SELECTED><No filter></OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.BasicImage">BasicImage</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.CrBlur">Blur</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.Chroma">Chroma</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.DropShadow">DropShadow</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.CrEmboss">Emboss</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.CrEngrave">Engrave</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.Pixelate">Pixelate</OPTION>
</SELECT><BR><BR>
</SPAN>

<SPAN ID="transitionSection" isSource=TRUE STYLE="display:none">
<B>Select a transition:</B><BR>
<SELECT ID="oSelect" onchange="changeTrans();">
<OPTION VALUE="empty" SELECTED><No transition></OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.CrBarn()">Barn</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.CrBlinds()">Blinds</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.Checkerboard()">Checkerboard</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.Fade()">Fade</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.CrInset()">Inset</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.CrIris()">Iris</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.Pixelate()">Pixelate</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.CrRadialWipe()">RadialWipe</OPTION>
<OPTION DISABLED VALUE="progid:DXImageTransform.Microsoft.RandomBars()">Random Bars</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.CrSlide()">Slide</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.CrSpiral()">Spiral</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.CrStretch()">Stretch</OPTION>
<OPTION DISABLED VALUE="progid:DXImageTransform.Microsoft.CrStrips()">Strips</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.CrWheel()">Wheel</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.Wipe()">Wipe</OPTION>
<OPTION VALUE="progid:DXImageTransform.Microsoft.CrZigzag()">Zigzag</OPTION>
</SELECT>
 
<BUTTON onclick="transStart(oImg)">Apply Transition</BUTTON><BR><BR>
</SPAN>

<SPAN ID="oBlurControls" isSource=TRUE STYLE="display:none">
PixelRadius:
<SELECT NAME="pixelRadiusList" onchange="blurFilterChange()">
    <OPTION VALUE="0">0</OPTION>
    <OPTION VALUE="5" SELECTED>5</OPTION>
    <OPTION VALUE="10">10</OPTION>
    <OPTION VALUE="20">20</OPTION>
</SELECT>
<INPUT TYPE="checkBox" NAME="makeShadowSwitch" onclick="blurFilterChange()"> MakeShadow</INPUT><BR><BR>
ShadowOpacity:
<SELECT NAME="shadowOpacityList" onchange="blurFilterChange()">
    <OPTION VALUE="0.00">0.00</OPTION>
    <OPTION VALUE="0.25">0.25</OPTION>
    <OPTION VALUE="0.50">0.50</OPTION>
    <OPTION VALUE="0.75">0.75</OPTION>
    <OPTION VALUE="1.00" SELECTED>1.00</OPTION>
</SELECT>
</SPAN>
<SPAN ID="oPixelateControls" isSource=TRUE STYLE="display:none">
MaxSquare:
<SELECT NAME="maxSquareList" onchange="pixelateFilterChange()">
    <OPTION VALUE="5">5</OPTION>
    <OPTION VALUE="10">10</OPTION>
    <OPTION VALUE="25">25</OPTION>
    <OPTION VALUE="50" SELECTED>50</OPTION>
</SELECT>
Progress:
<SELECT NAME="progressList" onchange="pixelateFilterChange()">
    <OPTION VALUE="0.0">0.00</OPTION>
    <OPTION VALUE="0.25">0.25</OPTION>
    <OPTION VALUE="0.50">0.50</OPTION>
    <OPTION VALUE="0.75">0.75</OPTION>
    <OPTION VALUE="1.00" SELECTED>1.00</OPTION>
</SELECT>
</SPAN>
<SPAN ID="oDropShadowControls" isSource=TRUE STYLE="display:none">
Color:
<SELECT NAME="shadowColorList" onchange="dropShadowFilterChange()">
    <OPTION VALUE="DDDDDD" SELECTED>Light Gray (DDDDDD)</OPTION>
    <OPTION VALUE="999999">Dark Gray (999999)</OPTION>
    <OPTION VALUE="FFFF00">Yellow (FFFF00)</OPTION>
    <OPTION VALUE="0000FF">Blue (0000FF)</OPTION>
</SELECT><BR><BR>
OffX:
<SELECT NAME="OffsetXList" onchange="dropShadowFilterChange()">
    <OPTION VALUE="3">-3</OPTION>
    <OPTION VALUE="-1">-1</OPTION>
    <OPTION VALUE="1" SELECTED>1</OPTION>
    <OPTION VALUE="3">3</OPTION>
</SELECT>
OffY:
<SELECT NAME="OffsetYList" onchange="dropShadowFilterChange()">
    <OPTION VALUE="-3">-3</OPTION>
    <OPTION VALUE="-1">-1</OPTION>
    <OPTION VALUE="1" SELECTED>1</OPTION>
    <OPTION VALUE="3">3</OPTION>
</SELECT><BR><BR>
<INPUT TYPE="checkBox" NAME="positiveSwitch" onclick="dropShadowFilterChange()" CHECKED> Positive</INPUT>
</SPAN>
<SPAN ID="oChromaControls" isSource=TRUE STYLE="display:none">
Color:
<SELECT NAME="chromaColorList" onchange="chromaFilterChange()">
    <OPTION VALUE="000000" SELECTED>Black (000000)</OPTION>
    <OPTION VALUE="FFFFFF">White (FFFFFF)</OPTION>
</SELECT>
</SPAN>
<SPAN ID="oBasicImageControls" isSource=TRUE STYLE="display:none">
Rotation:
<SELECT NAME="rotationList" onchange="basicImageFilterChange()">
    <OPTION VALUE="0" SELECTED>0 (0 deg.)</OPTION>
    <OPTION VALUE="1">1 (90 deg.)</OPTION>
    <OPTION VALUE="2">2 (180 deg.)</OPTION>
    <OPTION VALUE="3">3 (270 deg.)</OPTION>
</SELECT>Opacity:
<SELECT NAME="basicImageOpacityList" onchange="basicImageFilterChange()">
    <OPTION VALUE="0.00">0.00</OPTION>
    <OPTION VALUE="0.25">0.25</OPTION>
    <OPTION VALUE="0.50">0.50</OPTION>
    <OPTION VALUE="0.75">0.75</OPTION>
    <OPTION VALUE="1.00" SELECTED>1.00</OPTION>
</SELECT><BR>
<INPUT TYPE="checkBox" NAME="mirrorSwitch" onclick="basicImageFilterChange()"> Mirror</INPUT>
<INPUT TYPE="checkBox" NAME="invertSwitch" onclick="basicImageFilterChange()"> Invert</INPUT><BR>
<INPUT TYPE="checkBox" NAME="xraySwitch" onclick="basicImageFilterChange()"> XRay</INPUT>
<INPUT TYPE="checkBox" NAME="grayscaleSwitch" onclick="basicImageFilterChange()"> Grayscale</INPUT><BR>
<INPUT TYPE="checkBox" NAME="basicImageMaskSwitch" onclick="basicImageFilterChange()"> Mask</INPUT>
<SPAN ID="maskColorSpan">
MaskColor:
<SELECT NAME="basicImageMaskColorList" onchange="basicImageFilterChange()">
    <OPTION VALUE="FF0000">Red (FF0000)</OPTION>
    <OPTION VALUE="FFFF00">Yellow (FFFF00)</OPTION>
    <OPTION VALUE="00FF00">Green (00FF00)</OPTION>
    <OPTION VALUE="FF00FF">Magenta (FF00FF)</OPTION>
    <OPTION VALUE="0000FF">Blue (0000FF)</OPTION>
    <OPTION VALUE="00FFFF" SELECTED>Cyan (00FFFF)</OPTION>
</SELECT>
</SPAN>

</SPAN>

<SPAN ID="oBarnControls" isSource=TRUE STYLE="display:none">
<INPUT TYPE="checkBox" NAME="openingSwitch" onclick="barnTransChange()"> Opening</INPUT>
<INPUT TYPE="checkBox" NAME="barnVerticalSwitch" onclick="barnTransChange()"> Vertical</INPUT>
</SPAN>

<SPAN ID="oBlindsControls" isSource=TRUE STYLE="display:none">
Bands:
<SELECT NAME="blindsBandsList" onchange="blindsTransChange()">
    <OPTION VALUE="2">2</OPTION>
    <OPTION VALUE="4">4</OPTION>
    <OPTION VALUE="6">6</OPTION>
    <OPTION VALUE="8">8</OPTION>
    <OPTION VALUE="10" SELECTED>10</OPTION>
</SELECT>
Direction:
<SELECT NAME="blindsDirectionList" onchange="blindsTransChange()">
    <OPTION VALUE="up" SELECTED>up</OPTION>
    <OPTION VALUE="down">down</OPTION>
    <OPTION VALUE="left">left</OPTION>
    <OPTION VALUE="right">right</OPTION>
</SELECT>

</SPAN>


<SPAN ID="oCheckerboardControls" isSource=TRUE STYLE="display:none">
Direction:
<SELECT NAME="checkerboardDirectionList" onchange="checkerboardTransChange()">
    <OPTION VALUE="up">up</OPTION>
    <OPTION VALUE="down">down</OPTION>
    <OPTION VALUE="left">left</OPTION>
    <OPTION VALUE="right" SELECTED>right</OPTION>
</SELECT><BR><BR>
SquaresX:
<SELECT NAME="squaresXList" onchange="checkerboardTransChange()">
    <OPTION VALUE="2">2</OPTION>
    <OPTION VALUE="4">4</OPTION>
    <OPTION VALUE="6">6</OPTION>
    <OPTION VALUE="8">8</OPTION>
    <OPTION VALUE="10">10</OPTION>
    <OPTION VALUE="12">12</OPTION>
</SELECT>
SquaresY:
<SELECT NAME="squaresYList" onchange="checkerboardTransChange()">
    <OPTION VALUE="2">2</OPTION>
    <OPTION VALUE="4">4</OPTION>
    <OPTION VALUE="6">6</OPTION>
    <OPTION VALUE="8">8</OPTION>
    <OPTION VALUE="10">10</OPTION>
    <OPTION VALUE="12">12</OPTION>
</SELECT>
</SPAN>

<SPAN ID="oFadeControls" isSource=TRUE STYLE="display:none">
Overlap:
<SELECT NAME="fadeOverlapList" onchange="fadeTransChange()">
    <OPTION VALUE="0.00">0.00</OPTION>
    <OPTION VALUE="0.25">0.25</OPTION>
    <OPTION VALUE="0.50">0.50</OPTION>
    <OPTION VALUE="0.75">0.75</OPTION>
    <OPTION VALUE="1.00" SELECTED>1.00</OPTION>
</SELECT>
<INPUT TYPE="checkBox" NAME="centerSwitch" onclick="fadeTransChange()"> Center</INPUT>
</SPAN>

<SPAN ID="oIrisControls" isSource=TRUE STYLE="display:none">
irisStyle:
<SELECT NAME="irisStyleList" onchange="irisTransChange()">
    <OPTION VALUE="DIAMOND">DIAMOND</OPTION>
    <OPTION VALUE="CIRCLE">CIRCLE</OPTION>
    <OPTION VALUE="CROSS">CROSS</OPTION>
    <OPTION VALUE="PLUS" SELECTED>PLUS</OPTION>
    <OPTION VALUE="SQUARE">SQUARE</OPTION>
    <OPTION VALUE="STAR">STAR</OPTION>
</SELECT>
<INPUT TYPE="checkBox" NAME="irisReverseSwitch" onclick="irisTransChange()"> Reverse</INPUT>
</SPAN>

<SPAN ID="oPixelateTransControls" isSource=TRUE STYLE="display:none">
MaxSquare:
<SELECT NAME="maxSquareTransList" onchange="pixelateTransChange()">
    <OPTION VALUE="5">5</OPTION>
    <OPTION VALUE="10">10</OPTION>
    <OPTION VALUE="25">25</OPTION>
    <OPTION VALUE="50" SELECTED>50</OPTION>
</SELECT>
</SPAN>

<SPAN ID="oRadialWipeControls" isSource=TRUE STYLE="display:none">
wipeStyle:
<SELECT NAME="radialWipeStyleList" onchange="radialWipeTransChange()">
    <OPTION VALUE="CLOCK">CLOCK</OPTION>
    <OPTION VALUE="WEDGE">WEDGE</OPTION>
    <OPTION VALUE="RADIAL">RADIAL</OPTION>
</SELECT>
</SPAN>


<SPAN ID="oRandomBarsControls" isSource=TRUE STYLE="display:none">
<INPUT TYPE="checkBox" NAME="randomBarsVerticalSwitch" onclick="randomBarsTransChange()"> Vertical</INPUT>
</SPAN>

<SPAN ID="oSlideControls" isSource=TRUE STYLE="display:none">
slideStyle:
<SELECT NAME="slideStyleList" onchange="slideTransChange()">
    <OPTION VALUE="HIDE" SELECTED>HIDE</OPTION>
    <OPTION VALUE="PUSH">PUSH</OPTION>
    <OPTION VALUE="SWAP">SWAP</OPTION>
</SELECT>
Bands:
<SELECT NAME="slideBandsList" onchange="slideTransChange()">
    <OPTION VALUE="1" SELECTED>1</OPTION>
    <OPTION VALUE="3">3</OPTION>
    <OPTION VALUE="5">5</OPTION>
    <OPTION VALUE="7">7</OPTION>
    <OPTION VALUE="9">9</OPTION>
</SELECT>
</SPAN>

<SPAN ID="oSpiralControls" isSource=TRUE STYLE="display:none">
GridSizeX:
<SELECT NAME="spiralGridSizeXList" onchange="spiralTransChange()">
    <OPTION VALUE="8">8</OPTION>
    <OPTION VALUE="16" SELECTED>16</OPTION>
    <OPTION VALUE="24">24</OPTION>
    <OPTION VALUE="32">32</OPTION>
</SELECT>
GridSizeY:
<SELECT NAME="spiralGridSizeYList" onchange="spiralTransChange()">
    <OPTION VALUE="8">8</OPTION>
    <OPTION VALUE="16">16</OPTION>
    <OPTION VALUE="24">24</OPTION>
    <OPTION VALUE="32">32</OPTION>
</SELECT>
</SPAN>

<SPAN ID="oStretchControls" isSource=TRUE STYLE="display:none">
stretchStyle:
<SELECT NAME="stretchStyleList" onchange="stretchTransChange()">
    <OPTION VALUE="HIDE">HIDE</OPTION>
    <OPTION VALUE="PUSH">PUSH</OPTION>
    <OPTION VALUE="SPIN" SELECTED>SPIN</OPTION>
</SELECT>
</SPAN>

<SPAN ID="oStripsControls" isSource=TRUE STYLE="display:none">
Movement:
<SELECT NAME="movementList" onchange="stripsTransChange()">
    <OPTION VALUE="HIDE">HIDE</OPTION>
    <OPTION VALUE="PUSH">PUSH</OPTION>
    <OPTION VALUE="SPIN" SELECTED>SPIN</OPTION>
</SELECT>
StripsY:
<SELECT NAME="stripsYList" onchange="stripsTransChange()">
    <OPTION VALUE="2">2</OPTION>
    <OPTION VALUE="4" SELECTED>4</OPTION>
    <OPTION VALUE="6">6</OPTION>
    <OPTION VALUE="8">8</OPTION>
    <OPTION VALUE="10">10</OPTION>
</SELECT>
</SPAN>

<SPAN ID="oWheelControls" isSource=TRUE STYLE="display:none">
spokes:
<SELECT NAME="spokesList" onchange="wheelTransChange()">
    <OPTION VALUE="2">2</OPTION>
    <OPTION VALUE="4" SELECTED>4</OPTION>
    <OPTION VALUE="6">6</OPTION>
    <OPTION VALUE="8">8</OPTION>
    <OPTION VALUE="10">10</OPTION>
</SELECT>
</SPAN>

<SPAN ID="oWipeControls" isSource=TRUE STYLE="display:none">
GradientSize:
<SELECT NAME="gradientSizeList" onchange="wipeTransChange()">
    <OPTION VALUE="0.00">0.00</OPTION>
    <OPTION VALUE="0.25" SELECTED>0.25</OPTION>
    <OPTION VALUE="0.50">0.50</OPTION>
    <OPTION VALUE="0.75">0.75</OPTION>
    <OPTION VALUE="1.00">1.00</OPTION>
</SELECT><BR><BR>
wipeStyle:
<SELECT NAME="wipeStyleList" onchange="wipeTransChange()">
    <OPTION VALUE="0" ID="ltrrtlText" SELECTED>0 (Left-to-right)</OPTION>
    <OPTION VALUE="1" ID="ttbbttText">1 (Top-to-bottom)</OPTION>
</SELECT><BR><BR>
<INPUT TYPE="checkBox" NAME="wipeReverseSwitch" onclick="wipeTransChange()"> Reverse</INPUT>
</SPAN>

<SPAN ID="oZigzagControls" isSource=TRUE STYLE="display:none">
GridSizeX:
<SELECT NAME="zigzagGridSizeXList" onchange="zigzagTransChange()">
    <OPTION VALUE="8">8</OPTION>
    <OPTION VALUE="16" SELECTED>16</OPTION>
    <OPTION VALUE="24">24</OPTION>
    <OPTION VALUE="32">32</OPTION>
</SELECT>
GridSizeY:
<SELECT NAME="zigzagGridSizeYList" onchange="zigzagTransChange()">
    <OPTION VALUE="8">8</OPTION>
    <OPTION VALUE="16">16</OPTION>
    <OPTION VALUE="24">24</OPTION>
    <OPTION VALUE="32">32</OPTION>
</SELECT>
</SPAN>

<!-- DOCUMENT CONTENT END -->
</BODY>
</HTML>

文章来源于领测软件测试网 https://www.ltesting.net/