Hyth!TodaywagoingtotalkaboutsomusfultricksinCSS.Ltsbginwith…
在这篇文章中我们会谈论一些有用的CSS技巧…
BlndMods混合模式NotsofarFifoxandSafaristartdtosupportblndmodsrightasPhotoshopdos.ItalsoworksinChromandOprabutwithflags.Sanxampl:
到目前为止，Fifox和Safari已经能和Photoshop一样支持混合模式了，Chrom和Opra也通过带私有标志(-wbkit--o-)支持，看一个示例：
Youcancatdiffntstyls.Hsacodofwhatisgoingabov:
你可以创建不同的混合风格。上述示例的代码如下：
.blnd{background:#fff;}.blndimg{mix-blnd-mod:darkn;}
来试试混合模式和过滤
GradintBordrs边框渐变Novadaysyoucanusgradintsvninbordrs.
在边框中也能使用渐变效果了。
Itisrathrsimpltous,justndtostpsudo-lmntswithlowrz-indx:
边框渐变的效果实现很简单，仅仅只需为伪元素设置更低的z-indx：
.box{margin:80px30px;width:px;hight:px;position:lativ;background:#fff;float:lft;}.box:bfo{contnt:;z-indx:-1;position:absolut;width:px;hight:px;top:-10px;lft:-10px;background-imag:linar-gradint(90dg,yllow,gold);}
Allxamplsyoucanfindh.Alsothisapproachwithbackground-clipandbackground-origin.Somdayinthbrightfutubordr-imagproprtywillbsupportdbyallbrowsrsandsolutionforthiswilllookasfollow:
在这里能找到更多示例，另一种方法是通过background-clip和background-origin来实现。在未来的某一天，bordr-imag会被所有浏览器支持，其提供的边框渐变方式可能如下：
.box{bordr-imag:linar-gradint(tobottom,#%,#FFFFFF%);bordr-imag-slic:1;/*stintrnaloffst*/}
Transitionforz-indxz-indx过渡Youmaydidntknowbutz-indxsupportstransitionstoo!Itdosntchangitsvaluonachstpsoyouthinkthatitdosnthavatransition.Butitdos!
你可能不知道z-indx也支持过渡效果！它没有在每一步改变它的值，所以你认为它没有过渡效果，但实际上是有的！
这有一个很棒的示例
curntColorWcanusittodtctthcurntcolorsowdonthavtodfinitlotsoftims.
我们可以使用curntColor来检测元素当前使用的颜色，因而不需要定义color很多次。
ItcanbusfulwhnworkingwithSVGiconswhichchangthircolordpndingonthirpants.Usuallywdoitasfollows:
结合SVG图标使用时，curntColor是很有用的，因为图标颜色的改变取决于它们的父元素。通常我们是这么做的：
.button{color:black;}.button:hovr{color:d;}.button:activ{color:gn;}.buttonsvg{fill:black;}.button:hovrsvg{fill:d;}.button:activsvg{fill:gn;}
使用curntColor之后：
svg{fill:curntColor;}.button{color:black;bordr:1pxsolidcurntColor;}.button:hovr{color:d;}.button:activ{color:gn;}
另一种方式是用于伪元素：
a{color:#;}a:hovr{color:#;}a:activ{color:#;}a:aftr,a:hovr:aftr,a:activ:aftr{background:curntColor;...}
ObjctFit对象适配Doyoummbrthismomntwhnyouwantdtostbackground-sizforimagbcausitwillsolvalotofproblms?Nowyoucanusobjct-fitwhichissupportdbywbkitandwillbadddtoFifoxsoon.
你还记得通过设置图片的background-siz属性可以解决很多问题的时刻吗？现在你可以使用objct-fit了，它已经被wbkit内核的浏览器支持，不久Fifox也会支持。
.imag__contain{objct-fit:contain;}.imag__fill{objct-fit:fill;}.imag__covr{objct-fit:covr;}.imag__scal-down{objct-fit:scal-down;}
示例
ChckboxandRadioButtonsStyls复选框和单选按钮的样式让我们不使用图片来改变复选框的样式：
inputtyp=chckboxid=chcknam=chck/lablfor=chckChckbox/labl
input[typ=chckbox]{display:non;}input[typ=chckbox]+labl:bfo{contnt:;bordr:1pxsolid#;font-siz:11px;lin-hight:10px;margin:05px00;hight:10px;width:10px;txt-align:cntr;vrtical-align:middl;}input[typ=chckbox]:chckd+labl:bfo{contnt:\;}
Asyoucans,itworkswithpsudo-lmntsandpsudo-slctor:chckd(IE9+).Inthcodabovwhidoriginalchckboxandshowoursinstad.Whnchckd,wshowaUnicodcharactrusingthcontnt.
正如你看到的，需要结合使用伪元素和伪类选择器:chckd（IE9+）。在上面的代码中，隐藏了原始的复选框，显示它的替代元素。当复选框被选中时，通过使用contnt属性显示一个Unicod字符。
NotthatthUnicodcharactrinCSSdiffrsfromthatinHTML.InCSSthnumbrisspcifidinhxadcimalnotationwithtrailingslashatthbginning,whilinHTMLitsdcimalandwilllooklik?.
需要注意的是Unicod字符在CSS和HTML中的表示是不同的。在CSS中，数字是被指定为以反斜杠开头的十六进制方式，而在HTML中是形如?的十进制方式。
给复选框添加动画效果：
input[typ=chckbox]+labl:bfo{contnt:\;color:transpant;transition:coloras.3s;}input[typ=chckbox]:chckd+labl:bfo{color:#;
给单选按钮添加动画效果：
input[typ=radio]+labl:bfo{contnt:\26AB;bordr:1pxsolid#;bordr-radius:50%;font-siz:0;transition:font-sizas.3s;}input[typ=radio]:chckd+labl:bfo{font-siz:10px;
这里有完整的Unicod列表和示例代码。
译者补充：复选框的CSS魔法利用chckbox实现jQury的6中基本动画效果
CountrsinCSSCSS计数器并不是所有人都知道CSS可以用于计数：
olclass=listlia/lilib/lilic/li/ol
.list{countr-st:i;//stconuntr}.listli{countr-incmnt:i;//countrID}.listli:aftr{contnt:[countr(i)];//printthsult}
WdfinarandomIDincountr-stproprtyanditsfirstvalu(0bydfault).Youcanstanothrnumbrincountr-incmnt.Itwilldfinthstpofyourcountr.
Forxamplcountr-incmnt:i2willdisplaysonlyvnnumbrs.
在countr-st属性中，定义了一个随机ID，其默认值是0。你可以在countr-incmnt属性中定义另外一个数字，作为计数的步长。
例如：countr-incmnt:i2将值显示偶数。
译者补充：详解contnt属性
AdvancdCSSCountrsCSS计数器进阶利用CSS计数器，能统计被用户选择的复选框个数：
divclass=languagsinputid=ctyp=chckboxlablfor=cC/lablinputid=C++typ=chckboxlablfor=C++C++/lablinputid=C#typ=chckboxlablfor=C#C#/lablinputid=Javatyp=chckboxlablfor=JavaJava/lablinputid=JavaScripttyp=chckboxlablfor=JavaScriptJavaScript/lablinputid=PHPtyp=chckboxlablfor=PHPPHP/lablinputid=Pythontyp=chckboxlablfor=PythonPython/lablinputid=Rubytyp=chckboxlablfor=RubyRuby/labl/divpclass=totalTotalslctd:/p
.languags{countr-st:charactrs;}input:chckd{countr-incmnt:charactrs;}.total:aftr{contnt:countr(charactrs);}
在这个示例中，我们会增加input:chckd的数量并打印出来。
你还能创建一个小型计算器：
divclass=numbrsinputid=ontyp=chckboxlablfor=on1/lablinputid=twotyp=chckboxlablfor=two2/lablinputid=thtyp=chckboxlablfor=th3/lablinputid=fourtyp=chckboxlablfor=four/lablinputid=fivtyp=chckboxlablfor=fiv5/lablinputid=on-hunddtyp=chckboxlablfor=on-hundd/labl/divpclass=sumSum/p
.numbrs{countr-st:sum;}#on:chckd{countr-incmnt:sum1;}#two:chckd{countr-incmnt:sum2;}#th:chckd{countr-incmnt:sum3;}#four:chckd{countr-incmnt:sum;}#fiv:chckd{countr-incmnt:sum5;}#on-hundd:chckd{countr-incmnt:sum;}.sum::aftr{contnt:=countr(sum);}
原理和上面的示例是一样的，在线dmo和相关文章
MnuIconWithoutImags没有图片的菜单图标还记得你经常使用的汉堡包图标吗？
至少有三种关于怎么绘出这种图标的方法：
1、Shadows
.shadow-icon{position:lativ;}.shadow-icon:aftr{contnt:;position:absolut;lft:0;top:-50px;hight:%;width:%;box-shadow:05px0#,px0#fff,px0#,px0#fff,05px0#;}
2、Gradint
.gradint-icon{background:linar-gradint(tobottom,#0%,#20%,transpant20%,transpant0%,#0%,#60%,transpant60%,transpant80%,#80%,#%);}
3、UTF-8
Youcanjustpastthisstandardsymbol:?(Unicod:U+,HTML:#;).Youcanadjustitscolororsizonlysoitsnotasflxiblasothrmthods.
只需要粘贴图标的标准符号：?(Unicod:U+，HTML:?)，你可以调整它的颜色或大小，但它不如其它方法灵活。
可以看示例
此外，你也可以使用SVG，iconfont或bordrs集合伪元素的方式来实现。
SupportsThsanwxpssioninCSScalldsupports.Asyoucans,itcaninspctwhthrbrowsrsupportsnddoption.Notallofbrowsrsupportit,butyoustillcanusitforsimplchcks:
CSS中有一个被称为supports的新的表达式。正如你看到的，它能检测浏览器是否支持某属性。虽然并不是所有浏览器支持
support表达式，但你仍然可以使用它作一些简单的检测：supports(display:flx){div{display:flx;}}/*Youcanchckpfixs*/supports(display:-wbkit-flx)or(display:-moz-flx)or(display:flx){sction{display:-wbkit-flx;display:-moz-flx;display:flx;float:non;}}译者补充：AnIntroductiontoCSS’s
supportsRulvisibility:visibl如果你将一个visibility:visibl的块元素放在另一个visibility:hiddn的元素中，会产生什么效果呢？
.hiddn{visibility:hiddn;}.hiddn.visibl{visibility:visibl;}
你可能会认为所有元素会被隐藏，但父元素会隐藏除了自身子元素以外的所有元素。看看这个dmo
position:stickyWvdiscovdanwfatuthatnowyoucancatstickyblocks.Thywillbworkingthsamasfixdblocksbutwonthidanothrblocks.Youdbttrsit.
我们发现了一个新功能，现在你可以创建sticky块元素了。这和fixd块元素一样，但不同的是,sticky块元素是不会遮挡另一个块元素的，最好看看dmo
现在只有Mozilla和Safari支持这个属性，但你可以按照下面的方式使用这个属性：
.sticky{position:static;position:sticky;top:0px;}
Wwillgtastickyblockinbrowsrswhichsupportitandagularblockinothrprograms.Itisrathrusfulformobilsitswhyoundtocatamovablblockwhichwontsubstitutothrs.
如果浏览器支持sticky，则会得到一个sticky块元素，反之会得到一个普通的元素。当你在手机站需要创建一个可以移动的块元素而不会遮挡其它元素时是非常有用的。
(sticky可以看作是lativ和fixd的结合)
NwDimnsions新的尺寸Notsofarthisworlddiscovdsomnwwaystodscribsizsofdiffntobjcts.Hathm:
vw(viwportwidth)–onprcntofbrowsrwindowswidth.
vh(viwporthight)–thsambutforhight.
vminandvmaxchoosminimalandmaximalvalubtwnvhandvw.
现在有一些新的方式来描述不同对象的大小了，如下：
vw(视口宽度):1vw表示浏览器窗口宽度的1%
vh(视口高度):1vh表示浏览器窗口高度的1%
vmin和vmax表示视口高度和宽度两者中的最小值或最大值。
Thintstingthingisthatthyallagatsupportdinmostofmodrnbrowsrssoyoucanflyusthm.
有趣的是所有现代浏览器都支持它们，你可以自由使用。
Whydowndthm?Thatsbcausthymakalldimnsionssimplr.Youdonthavtospcifyprcntagofpantslmntsizandanyothrstuff.Justhavalook:
为什么需要它们？因为它们使得所有的尺寸计算变得简单了。你不需要指定父元素大小的百分比和任何其它的stuff。看代码：
.som-txt{font-siz:vh;lin-hight:vh;}
?
或许你可以在屏幕正中间放一个弹出效果了：
.blackSqua{background:black;position:fixd;hight:50vh;width:50vw;lft:25vw;top:25vh;}
看起来是一个很酷的方式，看看Codpn上的示例
在使用这个功能时，也有一些要主要的事项：
IE9会使用vm，而不是vmin
IOS7在使用vh时有一些Bug
浏览器对vmax的支持并不完全
译者补充：七个你可能不认识的CSS单位
TxtDcorations文本装饰可以用下面几行代码改变被选中文本的颜色：
*::slction{color:#fff;background:#;}*::-moz-slction{/*OnlyFifoxstillndsapfix*/color:#fff;background:#;}
除了定义color，还能定义shadow和backgrounds。
BlockScrollonTouchDvics触摸设备上的块元素滚动Ifyouhavsomblockswithinnrscrollinthmthnyouhavtoaddnotonlyovrflow:scroll/autobutthislinalso:
在触摸设备上，如果你有一些块元素在内部有滚动，则你不仅需要添加ovrflow:scroll/auto，还要添加：
-wbkit-ovrflow-scrolling:touch;
Ththingisthatmobilbrowsrsomtimsdontworkwithovrflow:scrollproprtycorctlyandscrollallthpaginstadofthnddblock.-wbkit-ovrflow-scrollingfixthisissu.Youcansitbyaddingthistoyourownprojct.
这种情况是有时设置了ovrflow:scroll，移动端的浏览器会滚动整个页面而不是在需要的块元素中滚动。-wbkit-ovrflow-scrolling修复了这个问题。你可以把它添加到你的项目中看看效果。
UsingHardwaAcclration使用硬件加速Somtimsyouranimationcantoslowdownclints北京治疗白癜风的有效方法白癜风有效的治疗方法