常用的CSS技巧代码段整理
1、垂直对齐
如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑：
.verticalcenter{
position:relative;
top:50%;
-webkit-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
}
使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对Transform的支持是需要关注的，Chrome4,Opera10,Safari3,Firefox3,andInternetExplorer9.均支持该属性。
2、伸展一个元素到窗口高度
在具体场景中，你可能想要将一个元素伸展到窗口高度，基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度，我们需要伸展顶层元素：html和body:
html,body{
height:100%;
}
然后将100%应用到任何元素的高：
div{height:100%;}
3、基于文件格式使用不同的样式
为了更容易知道链接的目标，有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标，对不同的资源使用不同的图标或图片：
a[href^="http://"]{
padding-right:20px;
background:url(external.gif)no-repeatcenterright;
}
/emails/
a[href^="mailto:"]{
padding-right:20px;
background:url(email.png)no-repeatcenterright;
}
/pdfs/
a[href$=".pdf"]{
padding-right:20px;
background:url(pdf.png)no-repeatcenterright;
}
4、创建跨浏览器的图像灰度
灰度有时看起来简约和优雅，能为网站呈现更深层次的色调。在示例中，我们将对一个SVG图像添加灰度过滤：
为了跨浏览器，会用到filter属性：
img{
filter:url(filters.svg#grayscale);/Firefox3.5+/
filter:gray;/IE6-9/
-webkit-filter:grayscale(1);/GoogleChrome,Safari6+&Opera15+/
}
5、背景渐变动画
CSS中最具诱惑的一个功能是能添加动画效果，除了渐变，你可以给背景色、透明度、元素大小添加动画。目前，你不能为渐变添加动画，但下面的代码可能有帮助。它通过改变背景位置，让它看起来有动画效果。
button{
background-image:linear-gradient(#5187c4,#1c2f45);
background-size:auto200%;
background-position:0100%;
transition:background-position0.5s;
}
button:hover{
background-position:00;
}
6、CSS：表格列宽自适用
对于表格，当谈到调整列宽时，是比较痛苦的。然后，这里有一个可以使用的技巧：给td元素添加white-space:nowrap;能让文本正确的换行
td{white-space:nowrap;}1.
7、只在一边或两边显示盒子阴影
如果你要一个盒阴影，试试这个技巧，能为任一边添加阴影。为了实现这个，首先定义一个有具体宽高的盒子，然后正确定位:after伪类。实现底边阴影的代码如下：
.box-shadow{
background-color:#FF8020;
width:160px;
height:90px;
margin-top:-45px;
margin-left:-80px;
position:absolute;
top:50%;
left:50%;
}
.box-shadow:after{
content:"";
width:150px;
height:1px;
margin-top:88px;
margin-left:-75px;
display:block;
position:absolute;
left:50%;
z-index:-1;
-webkit-box-shadow:0px0px8px2px#000000;
-moz-box-shadow:0px0px8px2px#000000;
box-shadow:0px0px8px2px#000000;
}
8、包裹长文本
如果你碰到一个比自身容器长的文本，这个技巧对你很有用。在这个示例中，默认时，不管容器的宽度，文本都将水平填充。
css
简单的CSS代码就能在容器中调整文本：
pre{
white-space:pre-line;
word-wrap:break-word;
}
效果看起来如下：
css
9、制造模糊文本
想要让文本模糊？可以使用color透明和text-shadow实现。
.blurry-text{
color:transparent;
text-shadow:005pxrgba(0,0,0,0.5);
}
10、用CSS动画实现省略号动画
这个片段将帮助你制造一个ellipsis的动画，对于简单的加载状态是很有用的，而不用去使用gif图像。
.loading:after{
overflow:hidden;
display:inline-block;
vertical-align:bottom;
animation:ellipsis2sinfinite;
content:"\2026";/asciicodefortheellipsischaracter/
}
@keyframesellipsis{
from{
width:2px;
}
to{
width:15px;
}
}
11、样式重置
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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;outline:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html{height:101%}
body{font-size:62.5%;line-height:1;font-family:Arial,Tahoma,sans-serif}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'''';content:none}
strong{font-weight:bold}
table{border-collapse:collapse;border-spacing:0}
img{border:0;max-width:100%}
p{font-size:1.2em;line-height:1.0em;color:#333}
12、典型的CSS清除浮动
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix{display:inline-block;}
html[xmlns].clearfix{display:block;}
html.clearfix{height:1%;}
13、新版清除浮动（2011）
.clearfix:before,.container:after{content:"";display:table;}
.clearfix:after{clear:both;}
/IE6/7/
.clearfix{zoom:1;}
14、跨浏览器的透明
.transparent{
filter:alpha(opacity=50);/internetexplorer/
-khtml-opacity:0.5;/khtml,oldsafari/
-moz-opacity:0.5;/mozilla,netscape/
opacity:0.5;/fx,safari,opera/
}
15、CSS引用模板
blockquote{background:#f9f9f9;border-left:10pxsolid#ccc;margin:1.5em10px;padding:.5em10px;quotes:"\201C""\201D""\2018""\2019"}
blockquote:before{color:#ccc;content:open-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em}
blockquotep{display:inline}
16、个性圆角
#container{
-webkit-border-radius:4px3px6px10px;
-moz-border-radius:4px3px6px10px;
-o-border-radius:4px3px6px10px;
border-radius:4px3px6px10px;
}
/alternativesyntaxbrokenintoeachline/
#container{
-webkit-border-top-left-radius:4px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:6px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:3px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-bottomleft:10px;
}
17、通用媒体查询
/Smartphones(portraitandlandscape)-----------/
@mediaonlyscreen
and(min-device-width:320px)and(max-device-width:480px){
/Styles/
}
/Smartphones(landscape)-----------/
@mediaonlyscreenand(min-width:321px){
/Styles/
}
/Smartphones(portrait)-----------/
@mediaonlyscreenand(max-width:320px){
/Styles/
}
/iPads(portraitandlandscape)-----------/
@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px){
/Styles/
}
/iPads(landscape)-----------/
@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:landscape){
/Styles/
}
/iPads(portrait)-----------/
@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px)and(orientation:portrait){
/Styles/
}
/Desktopsandlaptops-----------/
@mediaonlyscreenand(min-width:1224px){
/Styles/
}
/Largescreens-----------/
@mediaonlyscreenand(min-width:1824px){
/Styles/
}
/iPhone4-----------/
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-device-pixel-ratio:1.5){
/Styles/
}
18、现代字体栈
/TimesNewRoman-basedserif/
font-family:Cambria,"HoeflerText",Utopia,"LiberationSerif","NimbusRomanNo9LRegular",Times,"TimesNewRoman",serif;
/AmodernGeorgia-basedserif/
font-family:Constantia,"LucidaBright",Lucidabright,"LucidaSerif",Lucida,"DejaVuSerif,""BitstreamVeraSerif","LiberationSerif",Georgia,serif;
/AmoretraditionalGaramond-basedserif/
font-family:"PalatinoLinotype",Palatino,Palladio,"URWPalladioL","BookAntiqua",Baskerville,"BookmanOldStyle","BitstreamCharter","NimbusRomanNo9L",Garamond,"AppleGaramond","ITCGaramondNarrow","NewCenturySchoolbook","CenturySchoolbook","CenturySchoolbookL",Georgia,serif;
/TheHelvetica/Arial-basedsansserif/
font-family:Frutiger,"FrutigerLinotype",Univers,Calibri,"GillSans","GillSansMT","MyriadPro",Myriad,"DejaVuSansCondensed","LiberationSans","NimbusSansL",Tahoma,Geneva,"HelveticaNeue",Helvetica,Arial,sans-serif;
/TheVerdana-basedsansserif/
font-family:Corbel,"LucidaGrande","LucidaSansUnicode","LucidaSans","DejaVuSans","BitstreamVeraSans","LiberationSans",Verdana,"VerdanaRef",sans-serif;
/TheTrebuchet-basedsansserif/
font-family:"SegoeUI",Candara,"BitstreamVeraSans","DejaVuSans","BitstreamVeraSans","TrebuchetMS",Verdana,"VerdanaRef",sans-serif;
/Theheavier"Impact"sansserif/
font-family:Impact,Haettenschweiler,"FranklinGothicBold",Charcoal,"HelveticaInserat","BitstreamVeraSansBold","ArialBlack",sans-serif;
/Themonospace/
font-family:Consolas,"AndaleMonoWT","AndaleMono","LucidaConsole","LucidaSansTypewriter","DejaVuSansMono","BitstreamVeraSansMono","LiberationMono","NimbusMonoL",Monaco,"CourierNew",Courier,monospace;
19、自定义文本选择
::selection{background:#e2eae2;}
::-moz-selection{background:#e2eae2;}
::-webkit-selection{background:#e2eae2;}
20、为logo隐藏H1
h1{
text-indent:-9999px;
margin:0auto;
width:320px;
height:85px;
background:transparenturl("images/logo.png")no-repeatscroll;
}
21、图片边框偏光
img.polaroid{
background:#000;/Changethistoabackgroundimageorremove/
border:solid#fff;
border-width:6px6px20px6px;
box-shadow:1px1px5px#333;/Standardblurat5px.Increaseformoredepth/
-webkit-box-shadow:1px1px5px#333;
-moz-box-shadow:1px1px5px#333;
height:200px;/Settoheightofyourimageordesireddiv/
width:200px;/Settowidthofyourimageordesireddiv/
}
22、锚链接伪类
a:link{color:blue}
a:visited{color:purple}
a:hover{color:red}
a:active{color:yellow}1.
2.
3.
4.
23、奇特的CSS引用
.has-pullquote:before{
/Resetmetrics./
padding:0;
border:none;
/Content/
content:attr(data-pullquote);
/Pullouttotheright,modularscalebasedmargins./
float:right;
width:320px;
margin:12px-140px24px36px;
/Baselinecorrection/
position:relative;
top:5px;
/Typography(30pxline-heightequals25%incrementalleading)/
font-size:23px;
line-height:30px;
}
.pullquote-adelle:before{
font-family:"adelle-1","adelle-2";
font-weight:100;
top:10px!important;
}
.pullquote-helvetica:before{
font-family:"HelveticaNeue",Arial,sans-serif;
font-weight:bold;
top:7px!important;
}
.pullquote-facit:before{
font-family:"facitweb-1","facitweb-2",Helvetica,Arial,sans-serif;
font-weight:bold;
top:7px!important;
}
24、CSS3：全屏背景
html{
background:url(''images/bg.jpg'')no-repeatcentercenterfixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover
}
25、内容垂直居中
.container{
min-height:6.5em;
display:table-cell;
vertical-align:middle;
}
26、强制出现垂直滚动条
html{height:101%}1.
27、CSS3渐变模板
#colorbox{
background:#629721;
background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#83b842),to(#629721));
background-image:-webkit-linear-gradient(top,#83b842,#629721);
background-image:-moz-linear-gradient(top,#83b842,#629721);
background-image:-ms-linear-gradient(top,#83b842,#629721);
background-image:-o-linear-gradient(top,#83b842,#629721);
background-image:linear-gradient(top,#83b842,#629721);
}
28、@font-face模板
@font-face{
font-family:''MyWebFont'';
src:url(''webfont.eot'');/IE9CompatModes/
src:url(''webfont.eot?#iefix'')format(''embedded-opentype''),/IE6-IE8/url(''webfont.woff'')format(''woff''),/ModernBrowsers/url(''webfont.ttf'')format(''truetype''),/Safari,Android,iOS/url(''webfont.svg#svgFontName'')format(''svg'');/LegacyiOS/
}
body{
font-family:''MyWebFont'',Arial,sans-serif;
}
29、缝合CSS3元素
p{
position:relative;
z-index:1;
padding:10px;
margin:10px;
font-size:21px;
line-height:1.3em;
color:#fff;
background:#ff0030;
-webkit-box-shadow:0004px#ff0030,2px1px4px4pxrgba(10,10,0,.5);
-moz-box-shadow:0004px#ff0030,2px1px4px4pxrgba(10,10,0,.5);
box-shadow:0004px#ff0030,2px1px6px4pxrgba(10,10,0,.5);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
p:before{
content:"";
position:absolute;
z-index:-1;
top:3px;
bottom:3px;
left:3px;
right:3px;
border:2pxdashed#fff;
}
pa{
color:#fff;
text-decoration:none;
}
pa:hover,pa:focus,pa:active{
text-decoration:underline;
}
33.
30、CSS3斑马线
tbodytr:nth-child(odd){background-color:#ccc;}1.
31、有趣的&
.amp{
font-family:Baskerville,''GoudyOldStyle'',Palatino,''BookAntiqua'',serif;
font-style:italic;
font-weight:normal;
}
32、大字段落
p:first-letter{
display:block;
margin:5px005px;
float:left;
color:#ff3366;
font-size:5.4em;
font-family:Georgia,TimesNewRoman,serif;
}
33、内部CSS3盒阴影
#mydiv{
-moz-box-shadow:inset2px04px#000;
-webkit-box-shadow:inset2px04px#000;
box-shadow:inset2px04px#000;
}
34、外部CSS3盒阴影
#mydiv{
-webkit-box-shadow:02px2px-2pxrgba(0,0,0,0.52);
-moz-box-shadow:02px2px-2pxrgba(0,0,0,0.52);
box-shadow:02px2px-2pxrgba(0,0,0,0.52);
}
35、三角形列表项目符号
ul{
margin:0.75em0;
padding:01em;
list-style:none;
}
li:before{
content:"";
border-color:transparent#111;
border-style:solid;
border-width:0.35em00.35em0.45em;
display:block;
height:0;
width:0;
left:-1em;
top:0.9em;
position:relative;
}
36、固定宽度的居中布局
#page-wrap{
width:800px;
margin:0auto;
}1.
2.
3.
4.
37、CSS3列文本
#columns-3{
text-align:justify;
-moz-column-count:3;
-moz-column-gap:12px;
-moz-column-rule:1pxsolid#c4c8cc;
-webkit-column-count:3;
-webkit-column-gap:12px;
-webkit-column-rule:1pxsolid#c4c8cc;
}
38、CSS固定页脚
#footer{
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#444;
}
/IE6/
html#footer{
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight?document.documentElement.clientHeight:document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop))+''px'');
}
39、IE6的PNG透明修复
.bg{
width:200px;
height:100px;
background:url(/folder/yourimage.png)no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''/folder/yourimage.png'',sizingMethod=''crop'');
}
/1pxgifmethod/
img,.png{
position:relative;
behavior:expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName=="IMG"&&this.src.toLowerCase().indexOf(''.png'')>-1?(this.runtimeStyle.backgroundImage="none",this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''"+this.src+"'',sizingMethod=''image'')",this.src="images/transparwww.shanxiwang.netent.gif"):(this.origBg=this.origBg?this.origBg:this.currentStyle.backgroundImage.toString().replace(''url("'','''').replace(''")'',''''),this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''"+this.origBg+"'',sizingMethod=''crop'')",this.runtimeStyle.backgroundImage="none")),this.pngSet=true));
}
40、跨浏览器设置最小高度
#container{
min-height:550px;
height:auto!important;
height:550px;
}
41、CSS3鲜艳的输入
input[type=text],textarea{
-webkit-transition:all0.30sease-in-out;
-moz-transition:all0.30sease-in-out;
-ms-transition:all0.30sease-in-out;
-o-transition:all0.30sease-in-out;
outline:none;
padding:3px0px3px3px;
margin:5px1px3px0px;
border:1pxsolid#ddd;
}
input[type=text]:focus,textarea:focus{
box-shadow:005pxrgba(81,203,238,1);
padding:3px0px3px3px;
margin:5px1px3px0px;
border:1pxsolidrgba(81,203,238,1);
}
42、基于文件类型的链接样式
/externallinks/
a[href^="http://"]{
padding-right:13px;
background:url(''external.gif'')no-repeatcenterright;
}
/emails/
a[href^="mailto:"]{
padding-right:20px;
background:url(''email.png'')no-repeatcenterright;
}
/pdfs/
a[href$=".pdf"]{
padding-right:18px;
background:url(''acrobat.png'')no-repeatcenterright;
}
43、强制换行
pre{
white-space:pre-wrap;/css-3/
white-space:-moz-pre-wrap;/Mozilla,since1999/
white-space:-pre-wrap;/Opera4-6/
white-space:-o-pre-wrap;/Opera7/
word-wrap:break-word;/InternetExplorer5.5+/
}
44、在可点击的项目上强制手型
a[href],input[type=''submit''],input[type=''image''],label[for],select,button,.pointer{cursor:pointer;}1.
45、网页顶部盒阴影
body:before{
content:"";
position:fixed;
top:-10px;
left:0;
width:100%;
height:10px;
-webkit-box-shadow:0px0px10pxrgba(0,0,0,.8);
-moz-box-shadow:0px0px10pxrgba(0,0,0,.8);
box-shadow:0px0px10pxrgba(0,0,0,.8);
z-index:100;
}
46、CSS3对话气泡
.chat-bubble{
background-color:#ededed;
border:2pxsolid#666;
font-size:35px;
line-height:1.3em;
margin:10pxauto;
padding:10px;
position:relative;
text-align:center;
width:300px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
-moz-box-shadow:005px#888;
-webkit-box-shadow:005px#888;
font-family:''Bangers'',arial,serif;
}
.chat-bubble-arrow-border{
border-color:#666transparenttransparenttransparent;
border-style:solid;
border-width:20px;
height:0;
width:0;
position:absolute;
bottom:-42px;
left:30px;
}
.chat-bubble-arrow{
border-color:#edededtransparenttransparenttransparent;
border-style:solid;
border-width:20px;
height:0;
width:0;
position:absolute;
bottom:-39px;
left:30px;
}
47、H1-H5默认样式
h1,h2,h3,h4,h5{color:#005a9c;}
h1{font-size:2.6em;line-height:2.45em;}
h2{font-size:2.1em;line-height:1.9em;}
h3{font-size:1.8em;line-height:1.65em;}
h4{font-size:1.65em;line-height:1.4em;}
h5{font-size:1.4em;line-height:1.25em;}
48、纯CSS背景噪音
body{
background-image:url(data:image/png;base64,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);
background-color:#0094d0;
}
49、持久的列表排序
ol.chapters{
list-style:none;
margin-left:0;
}
ol.chapters>li:before{
content:counter(chapter)".";
counter-increment:chapter;
font-weight:bold;
float:left;
width:40px;
}
ol.chaptersli{
clear:left;
}
ol.start{
counter-reset:chapter;
}
ol.continue{
counter-reset:chapter11;
}
50、CSS悬浮提示文本
a{
border-bottom:1pxsolid#bbb;
color:#666;
display:inline-block;
position:relative;
text-decoration:none;
}
a:hover,a:focus{
color:#36c;
}
a:active{
top:1px;
}
/Tooltipstyling/
a[data-tooltip]:after{
border-top:8pxsolid#222;
border-top:8pxsolidhsla(0,0%,0%,.85);
border-left:8pxsolidtransparent;
border-right:8pxsolidtransparent;
content:"";
display:none;
height:0;
width:0;
left:25%;
position:absolute;
}
a[data-tooltip]:before{
background:#222;
background:hsla(0,0%,0%,.85);
color:#f6f6f6;
content:attr(data-tooltip);
display:none;
font-family:sans-serif;
font-size:14px;
height:32px;
left:0;
line-height:32px;
padding:015px;
position:absolute;
text-shadow:01px1pxhsla(0,0%,0%,1);
white-space:nowrap;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
a[data-tooltip]:hover:after{
display:block;
top:-9px;
}
a[data-tooltip]:hover:before{
display:block;
top:-41px;
}
a[data-tooltip]:active:after{
top:-10px;
}
a[data-tooltip]:active:before{
top:-42px;
}
60.
51、深灰色的圆形按钮
.graybtn{
-moz-box-shadow:inset0px1px0px0px#ffffff;
-webkit-box-shadow:inset0px1px0px0px#ffffff;
box-shadow:inset0px1px0px0px#ffffff;
background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#ffffff),color-stop(1,#d1d1d1));
background:-moz-linear-gradient(centertop,#ffffff5%,#d1d1d1100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=''#ffffff'',endColorstr=''#d1d1d1'');
background-color:#ffffff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1pxsolid#dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px24px;
text-decoration:none;
text-shadow:1px1px0px#ffffff;
}
.graybtn:hover{
background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#d1d1d1),color-stop(1,#ffffff));
background:-moz-linear-gradient(centertop,#d1d1d15%,#ffffff100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=''#d1d1d1'',endColorstr=''#ffffff'');
background-color:#d1d1d1;
}
.graybtn:active{
position:relative;
top:1px;
}
52、在可打印的网页中显示URLs
@mediaprint{
a:after{content:"["attr(href)"]";}
}1.
2.
3.
53、禁用移动Webkit的选择高亮
body{
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
54、CSS3圆点图案
body{
background:radial-gradient(circle,white10%,transparent10%),radial-gradient(circle,white10%,black10%)50px50px;
background-size:100px100px;
}
55、CSS3方格图案
body{
background-color:white;
background-image:linear-gradient(45deg,black25%,transparent25%,transparent75%,black75%,black),linear-gradient(45deg,black25%,transparent25%,transparent75%,black75%,black);
background-size:100px100px;
background-position:00,50px50px;
}
56、Github的fork色带
.ribbon{
background-color:#a00;
overflow:hidden;
/topleftcorner/
position:absolute;
left:-3em;
top:2.5em;
/45degccwrotation/
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
/shadow/
-moz-box-shadow:001em#888;
-webkit-box-shadow:001em#888;
}
.ribbona{
border:1pxsolid#faa;
color:#fff;
display:block;
font:bold81.25%''HelvetivaNeue'',Helvetica,Arial,sans-serif;
margin:0.05em00.075em0;
padding:0.5em3.5em;
text-align:center;
text-decoration:none;
/shadow/
text-shadow:000.5em#444;
}
57、CSSfont属性缩写
p{font:italicsmall-capsbold1.2em/1.0emArial,Tahoma,Helvetica;}1.
58、论文页面的卷曲效果
ul.box{
position:relative;
z-index:1;/preventshadowsfallingbehindcontainerswithbackgrounds/
overflow:hidden;
list-style:none;
margin:0;
padding:0;
}
ul.boxli{
position:relative;
float:left;
width:250px;
height:150px;
padding:0;
border:1pxsolid#efefef;
margin:030px30px0;
background:#fff;
-webkit-box-shadow:01px4pxrgba(0,0,0,0.27),0040pxrgba(0,0,0,0.06)inset;
-moz-box-shadow:01px4pxrgba(0,0,0,0.27),0040pxrgba(0,0,0,0.06)inset;
box-shadow:01px4pxrgba(0,0,0,0.27),0040pxrgba(0,0,0,0.06)inset;
}
ul.boxli:before,ul.boxli:after{
content:'''';
z-index:-1;
position:absolute;
left:10px;
bottom:10px;
width:70%;
max-width:300px;/avoidrotationcausinguglyappearanceatlargecontainerwidths/
max-height:100px;
height:55%;
-webkit-box-shadow:08px16pxrgba(0,0,0,0.3);
-moz-box-shadow:08px16pxrgba(0,0,0,0.3);
box-shadow:08px16pxrgba(0,0,0,0.3);
-webkit-transform:skew(-15deg)rotate(-6deg);
-moz-transform:skew(-15deg)rotate(-6deg);
-ms-transform:skew(-15deg)rotate(-6deg);
-o-transform:skew(-15deg)rotate(-6deg);
transform:skew(-15deg)rotate(-6deg);
}
ul.boxli:after{
left:auto;
right:10px;
-webkit-transform:skew(15deg)rotate(6deg);
-moz-transform:skew(15deg)rotate(6deg);
-ms-transform:skew(15deg)rotate(6deg);
-o-transform:skew(15deg)rotate(6deg);
transform:skew(15deg)rotate(6deg);
}
59、鲜艳的锚链接
a{color:#00e}
a:visited{color:#551a8b}
a:hover{color:#06e}
a:focus{outline:thindotted}
a:hover,a:active{outline:0}
a,a:visited,a:active{text-decoration:none;color:#fff;-webkit-transition:all.3sease-in-out}
a:hover,.glow{color:#ff0;text-shadow:0010px#ff0}
60、带CSS3特色的横幅显示
.featureBanner{position:relative;margin:20px}
.featureBanner:before{content:"Featured";position:absolute;top:5px;left:-8px;padding-right:10px;color:#232323;font-weight:bold;height:0px;border:15pxsolid#ffa200;border-right-color:transparent;line-height:0px;box-shadow:-0px5px5px-5px#000;z-index:1}
.featureBanner:after{content:"";position:absolute;top:35px;left:-8px;border:4pxsolid#89540c;border-left-color:transparent;border-bottom-color:transparent}
|
|
