| <script src= "/js/jquery-1.7.1.min.js" language= "JavaScript" ></script>
<script language= "JavaScript" >
$ (document). Ready (function () {
$ (' textarea '). each (function () {
$ (this). Height ($ (this) [0].scrollheight);
});
})
</script>
<style>
* {
padding:0;
margin:0;
}
H1 {
font-size:20px;
margin-top:15px;
border-bottom:1px dotted #ccc;
display:table;
}
TEXTAREA {
border:1px solid #ccc;
width:100%;
}
DT {
Font-weight:bold;
}
#content {
width:80%;
margin:0 Auto;
}
#nav {
position:fixed;
right:5px;
top:5px;
Background: #000;
opacity:0.5;
Filter:alpha (OPACITY=50);
padding:15px;
Color: #fff;
}
#nav Li {
List-style-type:none;
}
#nav Li a {
Color: #fff;
Text-decoration:none;
}
#nav Li A:hover {
Text-decoration:underline;
}
. box {
width:80px;
height:80px;
Display:block;
Background-color: #D0D0D0;
margin:10px 5px;
}
#rgba {
position:relative;
height:150px;
}
#rgba. Box {
Position:absolute;
left:0;
top:0;
}
/******************************************************************************************/
. box_round {
-moz-border-radius:10px; * ff1+ * *
-webkit-border-radius:10px; * saf3+, Chrome * *
border-radius:10px; /* Opera 10.5, IE 9 * *
}
. Box_shadow {
border:1px solid #999;
-moz-box-shadow:10px 10px 4px #666; * ff3.5+ * *
-webkit-box-shadow:10px 10px 4px #666; * saf3.0+, Chrome * *
box-shadow:10px 10px 4px #666; /* Opera 10.5, IE 9.0 * *
Filter:progid:DXImageTransform.Microsoft.dropshadow (offx=10px, offy=10px, color= ' #666 '); * IE6,IE7 * *
-ms-filter: "Progid:DXImageTransform.Microsoft.dropshadow (offx=10px, offy=10px, color= ' #666 ')"; * IE8 * *
}
. box_gradient {
Background-image:-moz-linear-gradient (Top, #444444, #999999); * FF3.6 * *
Background-image:-webkit-gradient (Linear,left, left Bottom, color-stop (0, #444444), Color-stop (1, #999999)); * saf4+, Chrome * *
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #444444 ', endcolorstr= ' #999999 ', gradienttype= ' 0 '); * IE6,IE7 * *
-ms-filter: Progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #444444 ', endcolorstr= ' #999999 ', Gradienttype= ' 0 ') "; * IE8 * *
}
#rgba. Box_rgba {
left:50px;
top:50px;
Background-color: #03F;
opacity:0.5;
Filter:alpha (OPACITY=50);
}
. box_rotate {
-moz-transform:rotate (7.5DEG); * ff3.5+ * *
-o-transform:rotate (7.5DEG); /* Opera 10.5 * *
-webkit-transform:rotate (7.5DEG); * saf3.1+, Chrome * *
Filter:progid:DXImageTransform.Microsoft.Matrix (m11=0.9914,m12=-0.1305,m21=0.1305,m22=0.9914,sizingmethod= ' Auto expand ');
-ms-filter: "Progid:DXImageTransform.Microsoft.Matrix (M11=0.9914,m12=-0.1305,m21=0.1305,m22=0.9914,sizingmethod = ' Auto expand '); * IE8 * *
} </style>
<body>
<div id= "Content" >
<div id= "NAV" >
<ul>
<li><a href= "#rounded" > Rounded corners css</a></li>
<li><a href= "#shadow" > Boxed shaded CSS </a></li>
<li><a href= "#gradient" > Linear gradient css</a></li>
<li><a href= "#opacity" > Transparent css</a></li>
<li><a href= "#rotation" > Rotating css</a></li>
<li><a href= "#font-face" > Server-side Fonts css</a></li>
</ul>
</div>
<H1 id= "rounded" > Corner css (<strong>rounded corner</strong>) <div>
<div class= "box Box_round" ></div>
</div>
<textarea>/* CSS3 *
. box_round {
-moz-border-radius:30px; * ff1+ * *
-webkit-border-radius:30px; * saf3+, Chrome * *
border-radius:30px; /* Opera 10.5, IE 9 * *
}
</textarea> <div>
<div class= "box Box_shadow" ></div>
<div class= "" >
The settings for <p>-moz-box-shadow,-webkit-box-shadow, and Box-shadow are the same and have 4 parameters, meaning x-axis offset, y-offset, blur of shadow, and shadow color. </p>
<p>ie 6~8 use its unique filters, you need to set three parameters: OFFX (x-axis offset), Offy (Y-offset), color (shadow color). </p>
</div>
</div> <textarea>/* CSS3 *
. Box_shadow {
-moz-box-shadow:3px 3px 4px #333333; * ff3.5+ * *
-webkit-box-shadow:3px 3px 4px #33333; * saf3.0+, Chrome * *
box-shadow:3px 3px 4px #33333; /* Opera 10.5, IE 9.0 * *
Filter:progid:DXImageTransform.Microsoft.dropshadow (offx=3px, offy=3px, color= ' #333333 '); * IE6,IE7 * *
-ms-filter: "Progid:DXImageTransform.Microsoft.dropshadow (offx=3px, offy=3px, color= ' #333333 ')"; * IE8 * *
}
</textarea> <H1 id= "Gradient" > Linear gradient css (<strong>Gradient</strong>) <div>
<div class= "box box_gradient" ></div>
<div>
<dl>
<dt>-moz-linear-gradient</dt>
<dd>-moz-linear-gradient has three parameters. The first parameter represents the direction of the linear gradient, top is from up to down, left is left-to-right, and if it is defined as the left top, it is from the upper left-hand corner to the lower right corner. The second and third parameters are the start and end colors respectively. You can also insert more arguments between them to indicate a variety of color gradients. </dd>
</dl>
<dl>
<dt>-webkit-gradient</dt>
<dd>-webkit-gradient is the WebKit engine's implementation of the gradient, a total of five parameters. The first parameter represents the gradient type, either a linear (linear gradient) or a radial (a radiation gradient). The second and third arguments are a pair of values, representing the gradient start and end points, respectively. This pair of values can be represented in a coordinate form, or it can be represented by a key value, such as left top (upper left-hand corner) and left bottom (bottom left-hand corner). The fourth and fifth parameters, respectively, are two color-stop functions. The Color-stop function accepts two arguments, the first representing the position of the gradient, 0 is the starting point, 0.5 is the midpoint, 1 is the end point, and the second represents the color of the point. </dd>
</dl>
<dl>
<dt>DXImageTransform.Microsoft.gradient</dt>
<dd>ie relies on filters to implement gradients. STARTCOLORSTR represents the color of the starting point, ENDCOLORSTR represents the endpoint color. GradientType represents the gradient type, 0 is the default value, represents a vertical gradient, and 1 represents a horizontal gradient. </dd>
</dl>
</div>
</div>
<textarea>/* CSS3 *
. Box_rgba {
Background-color: #B4B490;
Background:transparent;
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #99B4B490 ', endcolorstr= ' #99B4B490 '); * IE6,IE7 * *
-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #99B4B490 ', endcolorstr= ' #99B4B490 ')"; * IE8 * *
Zoom:1;
Background-color:rgba (180, 180, 144, 0.6); * ff3+, saf3+, Opera 10.10+, Chrome * *
}
</textarea> <H1 id= "opacity" > Transparent CSS (<strong>Opacity</strong>) <div id= "Rgba" >
<div class= "box" ></div>
<div class= "box Box_rgba" ></div>
</div>
<textarea>/* CSS3 *
. box_gradient {
opacity:0.5;
Filter:alpha (OPACITY=50);
}
</textarea> <H1 id= "Rotation" > Rotated css (<strong>rotation</strong>) <div>
<div class= "box box_rotate" ></div>
<div>
<p> in addition to IE, other browsers are using the Rotate function to achieve the rotation of an object. For example, rotate (7.5deg) means a clockwise rotation of 7.5 degrees (degree). </p>
<p>ie need to use a complex filter DXImageTransform.Microsoft.Matrix. It accepts five parameters altogether, the first four parameters need to compute trigonometric functions, then write M11 = cos (rotation), M12 =-sin (rotation), M21 = sin (rotation), M22 = cos (rotation), The rotation represents the rotation angle, if rotated 7.5 degrees clockwise, the rotation is 7.5, the fifth parameter Sizingmethod represents redrawing, and the ' auto expand ' representative automatically expands to the new boundary. </p>
<p> In addition to this filter, IE has a slightly simpler filter DXImageTransform.Microsoft.BasicImage (rotation=x). The x can only take the value of 1,2,3,0, respectively, indicating the clockwise choice of 90 degrees, 180 degrees, 270 degrees and 360 degrees. </p>
</div>
</div>
<textarea>/* CSS3 *
. box_rotate {
-moz-transform:rotate (7.5DEG); * ff3.5+ * *
-o-transform:rotate (7.5DEG); /* Opera 10.5 * *
-webkit-transform:rotate (7.5DEG); * saf3.1+, Chrome * *
Filter:progid:DXImageTransform.Microsoft.Matrix (m11=0.9914,m12=-0.1305,m21=0.1305,m22=0.9914,sizingmethod= ' Auto expand ');
-ms-filter: "Progid:DXImageTransform.Microsoft.Matrix (M11=0.9914,m12=-0.1305,m21=0.1305,m22=0.9914,sizingmethod = ' Auto expand '); * IE8 * *
}
</textarea> <H1 id= "Font-face" > Server-side fonts css (<strong>font-face</strong>) <textarea>/* CSS3 *
@font-face {
font-family: ' MyFont ';
Src:url (' Myfont.eot '); * ie6+ * *
Src:local (' Myfont.ttf '),
URL (' myfont.woff ') format (' Woff '),/* FF3.6 *
URL (' Myfont.ttf ') format (' TrueType '); * * ff3.5+, saf3+,chrome,opera10+ * *
}
. box_font{font-family: "MyFont";}
</textarea> <div>
<div>
<p> first line of code:</p>
<p>font-family: ' MyFont ';</p>
<p> for this font to play a name, you can set, I use here is myfont. </p>
<p>src:url (' Myfont.eot ');</p>
<p> this line represents the font position, because IE only supports the server-side EOT font, so this line is IE-specific. </p>
<p>src:local (' Myfont.ttf '), <br/> url (' myfont.woff ') format (' Woff '), <br/> url (' Myfont.ttf ') Format (' TrueType ');</p>
<p>local () indicates that the font is found on the local (client), and is not downloaded if the machine is already installed. The URL () indicates the location of the font on the server, and format () is used to describe the font format. Firefox 3.5 supports TrueType and OpenType fonts, and Firefox 3.6 adds Woff fonts. Other browsers based on the WebKit engine (Sarif,opera, chrome) now seem to support only TrueType. </p>
<p> then, when you use it, you can write it. </p>
<p>h2{font-family: "MyFont";} </p>
<p> Note that font files must be from the same domain name as the Web page file, consistent with the browser's "homology policy". In addition, because the Chinese font file is too large, server-side fonts are obviously only suitable for English fonts. </p>
</div>
</div>
</div> |
