CSS CSS3 Skewed Shadows
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Tuts</title>
<style>
body {
width: 500px;
margin: 50px auto;
}
.box {
position: relative;
-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
box-shadow: 1px 2px 4px rgba(0,0,0,.5);
/* Kokakify */
padding: 10px;
background: white;
}
.box img {
max-width: 100%;
border: 1px inset #8a4419;
}
.box:after {
content: '';
-webkit-box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
-moz-box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
position: absolute;
width: 50%;
height: 40px;
bottom: 20px;
right: 90px;
z-index: -1;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
transform: skew(-40deg);
}
</style>
</head>
<body>
<div class="box">
<img src="tuts.jpg" alt="Tuts" />
</div>
</body>
</html>CSS 样式表模板
/*
Document : ${name}
Created on : ${date}, ${time}
Author : ${user}
Description:
Purpose of the stylesheet follows.
*/
/* html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark
*/
html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;font-size:100%;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
/* Minimal base styles
More Info: https://github.com/paulirish/html5-boilerplate/blob/362d0b7/css/style.css
*/
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;overflow-y:scroll}
a:link{-webkit-tap-highlight-color:#FF5E99}
a:hover,a:active{outline:none}
a,a:active,a:visited{color:#607890}
a:hover{color:#036}
ul,ol{margin-left:2em}
ol{list-style-type:decimal}
nav ul,nav li{list-style:none;list-style-image:none;margin:0}
small{font-size:85%}
b,strong,th{font-weight:700}
td{vertical-align:top}
sub,sup{font-size:75%;line-height:0;position:relative}
sup{top:-.5em}
sub{bottom:-.25em}
pre{padding:15px;white-space:pre-wrap;word-wrap:break-word}
.ie6 legend,.ie7 legend{margin-left:-7px}
button,input,select,textarea{font-family:sans-serif;font-size:100%;margin:0;overflow:visible;vertical-align:baseline;width:auto}
textarea{overflow:auto;vertical-align:text-top}
label,input[type=button],input[type=submit],input[type=image],button{cursor:pointer}
input::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0}
input:invalid,textarea:invalid{-moz-box-shadow:0 0 5px red;-webkit-box-shadow:0 0 5px red;border-radius:1px;box-shadow:0 0 5px red}
.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}
.ie7 img{-ms-interpolation-mode:bicubic}
/* ------------------------- Backgrounds */
/*body {background:url("../images/im_bg.gif") left top repeat;}*/
/* ------------------------- Generic */
body {
/*color:#ffffff;*/
}
.clear {clear:both;}
img { /* Needed for mobile */
display:block;
margin-left:auto;
margin-right:auto;
width:100%;
}
/* ------------------------- Typography */
strong {font-weight:bold;}
p {}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
address {}
pre, code {font-family: monospace;}
/* Links */
a, a:visited, a:active {}
a:hover {}
/* ------------------------- Forms */
input {}
select {}
label {}
/* ------------------------- Lists */
/* ------------------------- Layout */
/* ------------------------- Popups */
/* ------------------------- Media Queries */
/* ---------------------------------------------------------------------------- */
/* MEDIA QUERIES -------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
/**
* Print styles.
*
* Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
*/
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
-ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
a, a:visited { color: #444 !important; text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width : 480px) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 481px)
and (max-width : 768px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 769px)
and (max-width : 1024px) {
/* Styles */
}
/* Larger screens ----------- */
@media only screen
and (min-width : 1024px) {
/* Styles */
}CSS 重置浏览器样式
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}CSS 适用于IE 5.5和6的透明PNG修复程序
<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />
<script type="text/javascript">
// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com
// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/
// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = '../images/blank.gif';
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
function filt(s, m)
{
if (filters[f])
{
filters[f].enabled = s ? true : false;
if (s) with (filters[f]) { src = s; sizingMethod = m }
}
else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}
function doFix()
{
// Assume IE7 is OK.
if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
(event && !/(background|src)/.test(event.propertyName))) return;
var bgImg = currentStyle.backgroundImage || style.backgroundImage;
if (tagName == 'IMG')
{
if ((/\.png$/i).test(src))
{
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
filt(src, 'scale');
src = blankImg;
}
else if (src.indexOf(blankImg) < 0) filt();
}
else if (bgImg && bgImg != 'none')
{
if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
{
var s = RegExp.$1;
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
style.backgroundImage = 'none';
filt(s, 'crop');
// IE link fix.
for (var n = 0; n < childNodes.length; n++)
if (childNodes[n].style) childNodes[n].style.position = 'relative';
}
else filt();
}
}
doFix();
</script>
</public:component>CSS HTML5 Ready CSS重置
/*&nbsp;&nbsp;&nbsp;html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)&nbsp;&nbsp;v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark&nbsp;&nbsp;html5doctor.com/html-5-reset-stylesheet/*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article, aside, figure, footer, header,
hgroup, nav, section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
/* END RESET CSS */CSS 掌握CSS模板（包括Eric Meyers CSS重置）
/* index
-------------------------------------------------------------------------------------- */
/*
* Filename: style.css
* Description: global CSS (master)
* Version: 1.0.0 (YYYY-MM-DD)
* Website: website-url
* Author: authorname
== STRUCTURE ============================================================================
* Page width: 990 px
* Number of columns: 1
*/
/* colorscheme
--------------------------------------------------------------------------------------- */
/*
white (bg): #fff
grey (intro text): #333
grey (h3 headlines +contact bg) #a3a3a3
black (text): #000
red (link active): #670001
dark red (link hover + visited): #431611
*/
/* Browser CSS-Reset
--------------------------------------------------------------------------------------- */
/* Eric Meyer's Reset Reloaded */
/* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {outline: 0;}
body {
line-height: 1;
color: white;
background: black;
}
ol, ul {list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
/* images and linked images without border */
img, a img {border: 0;}
/* globals
--------------------------------------------------------------------------------------- */
html {background: #fff;}
body {
background: #fff url(image.jpg) no-repeat left top;
color: #000;
display: table;
font-size: 100%; /* reduces the body text from the 16px default (common to most browsers and OS set-ups) down to the 12px. */
width: 100%; /* This rule is primarily there for Internet Explorer 6 and below on Windows */
}
html>body {
font-size: 16px; /* sets the text size specifically and is ignored by IE6, but used by Firefox, Safari, IE7, Opera */
}
a {
border-bottom: 1px solid #670001;
padding-bottom: 1px;
text-decoration: none;
}
a:link, a:visited {color: #670001;}
a:hover {
background: #431611;
border-bottom: 0;
color: #fff;
}
/* Typography
--------------------------------------------------------------------------------------- */
p {
font: 1em/1.75em Georgia, "Times New Roman", Times, serif;
margin: 0;
text-indent:0;
}
p+p {text-indent:2em;}
.first {text-indent: 0;}
h1 {
border-bottom: 1px dotted #a3a3a3;
font: 3em/1em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: bold;
margin-top: 80px;
margin-left: 310px;
margin-bottom: 1em;
padding:0 30px 30px 20px;
}
h2 {
font: 2.5em/1.75em Georgia, "Times New Roman", Times, serif;
margin-top: 1em;
margin-bottom: 0em;
}
h3 {
color: #a3a3a3;
font: 1.88em/0.934em Georgia, "Times New Roman", Times, serif;
margin-top: 1.068em;
margin-bottom: 0em;
}
h4 {
color: #fff;
font: 2em/1.5em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif;
font-style: italic;
}
h5 {color: #ccc; font: 1.25em/1.75em Georgia, "Times New Roman", Times, serif;}
.amp {
font: 1em/1em "Baskerville", "Linotype Palatino", Times, Georgia, "Times New Roman", serif;
font-style: italic;
} /* use the best Ampersand */
/* layout elements
--------------------------------------------------------------------------------------- */
/* wrapper */
/* nav */
/* content */
/* footer */
/* end of this stylesheet
-------------------------------------------------------------------------------------- */CSS 工具箱CSS - 布局，打印和印刷工具
/*
Toolbox CSS
Chris Coyier
http://css-tricks.com
*/
/*
LAYOUT TOOLS
*/
.floatLeft{float:left;}
.floatRight{float:right;}
.clear{clear:both;}
.layoutCenter{margin:0 auto;}
.textCenter{text-align:center;}
.textRight{text-align:right;}
.textLeft{text-align:left;}
/*
PRINT TOOLS
*/
.page-break{page-break-before:always;}
/*
TYPOGRAPHIC TOOLS
*/
.error{border:1px solid #fb4343;padding:3px;color:#fb4343;}
.warning{border:1px solid #d4ac0a;padding:3px;color:#d4ac0a;}
.success{border:1px solid #149b0d;padding:3px;color:#149b0d;}
.callOut{font-size:125%;font-weight:bold;}
.strikeOut{text-decoration:line-through;}
.underline{text-decoration:underline;}
.resetTypeStyle{font-weight:normal;font-style:normal;font-size:100%;text-decoration:none;background-color:none;word-spacing:normal;letter-spacing:0px;text-transform:none;text-indent:0px;}
/*
STYLING EXTRAS
*/
a[href^="mailto"]{background:url(images/emailIcon.png) left center no-repeat;padding-left:10px;}
a[href~=".pdf]{background:url(images/pdfIcon.png) left center no-repeat;padding-left:10px;}
a.button{color:black;border:1px solid black;padding:3px;}
a.button:hover{background:black;color:white;}
.transpBlack{background:url(images/transpBlack.png);}
/*
DISPLAY VALUES
*/
.hide{display:none;}
.show{display:block;}
.invisible{visibility:hidden;}CSS 表格样式，CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>The Very Best Eggnog</title>
<style type="text/css">
body
{
font: .8em "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
}
ol
{
margin:0;
padding: 0 1.5em;
}
table
{
color:#FFF;
background:#C00;
border-collapse:collapse;
width:647px;
border:5px solid #900;
}
thead
{
}
thead th
{
padding:1em 1em .5em;
border-bottom:1px dotted #FFF;
font-size:120%;
text-align:left;
}
thead tr
{
}
td
{
padding:.5em 1em;
}
tbody tr.odd td
{
background:transparent url(tr_bg.png) repeat top left;
}
tfoot
{
}
tfoot td
{
padding-bottom:1.5em;
}
tfoot tr
{
}
* html tr.odd td
{
background:#C00;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='tr_bg.png', sizingMethod='scale');
}
#middle
{
background-color:#900;
}
</style>
</head>
<body>
<h1>The Very Best Eggnog</h1>
<table>
<col>
<col id="middle">
<col>
<thead>
<tr><th>Ingredients</th><th>serves 12</th><th>serves 24</th></tr>
</thead>
<tfoot>
<tr><td colspan="3"><ol>
<li>Combine milk and spices including vanilla bean in a heavy saucepan and let them infuse over lowest possible heat for 5 minutes. Meanwhile, combine yolks and sugar in a large bowl and whisk until mixed.</li>
<li>Bring milk to a boil and gradually whisk it into the yolk mixture. Return the mixture to the saucepan. Cook over medium heat, stirring steadily with a wooden spoon, for 2 to 3 minutes, or until foam subsides and mixture thickens to consistency of heavy cream. (Mixture should thickly coat the back of a wooden spoon.) Do not boil, or mixture will curdle.</li>
<li>Strain mixture into a large bowl and let cool to room temperature. Stir in rum, brandy, half-and-half, vanilla and nutmeg.</li>
<li>Refrigerate eggnog for at least 2 hours, preferably overnight. Just before serving, dust top of eggnog with additional nutmeg.</li>
</ol></td></tr>
</tfoot>
<tbody>
<tr><td>milk</td><td>1 quart</td><td>2 quart</td></tr>
<tr class="odd"><td>cinnamon sticks</td><td>2</td><td>1</td></tr>
<tr><td>vanilla bean, split</td><td>1</td><td>2</td></tr>
<tr class="odd"><td>cloves</td><td>5</td><td>10</td></tr>
<tr><td>mace</td><td>10 blades</td><td>20 blades</td></tr>
<tr class="odd"><td>egg yolks</td><td>12</td><td>24</td></tr>
<tr><td>cups sugar</td><td>1 ½ cups</td><td>3 cups</td></tr>
<tr class="odd"><td>dark rum</td><td>1 ½ cups</td><td>3 cups</td></tr>
<tr><td>brandy</td><td>1 ½ cups</td><td>3 cups</td></tr>
<tr class="odd"><td>vanilla</td><td>1 tbsp</td><td>2 tbsp</td></tr>
<tr><td>half-and-half or light cream</td><td>1 quart</td><td>2 quart</td></tr>
<tr class="odd"><td>Freshly grated nutmeg to taste</td><td></td><td></td></tr>
</tbody>
</table>
</body>
</html>CSS 圆角没有图像
<div id="container">
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--content goes here -->
<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>
And here's it the basic CSS:
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}CSS 将图像垂直和水平居中放置在容器中
The markup:
<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
The CSS:
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->