??? ???? ?? ??? ?????? ??? CSS

?? 1 : ????? ?? ? ??? ???? (??)

pros : Ultra-Clean Technique? ?? ?? ?? ???? ????. ???. ?? ?? ???? ? ??? ??? ???? RGBA
• ? ???? ? ?? ??? ?????. ??? ?? ??? RGBA (255,255,255,0.4), ??? 40% ???????. ??? ??? ??? ??? RGBA (0,0,0,0.4)??, 40% ??????? ?? ????.
? ??? ? ? ?? ????? ?? ???? ?? ? ???? ???? ?? ??? ?????? ?????. . ??? ??? ??? ? ???? ??? ??? ?? ??? ???? ?? ?? ?? ??? 100% ??? ???? ??? ? ????. (?? :? ?? ???? ?? ??? ?? ?? ?? ? ?? ?????. ???
?? ????? ?? ??? ?? ??? ?? ?????.

? ????? ?? ??? ?????.) (??) pros : ? ?? ??? ???? ????

img.beveled{    position:relative;}img.beveled:after{    position:absolute;    left:0;    top:0;    display:block;    content:"0a0";    box-sizing:border-box;    width:100%;    height:100%;    border:5px solid;    border-color:rgba(255,255,255,0.4)                 rgba(0,0,0,0.4)                 rgba(0,0,0,0.4)                 rgba(255,255,255,0.4);}

<img     alt="A legion of Lego Stormtroopers, standing in formation." />

?? : ?? ?? ? ? ?? ? ??? ?????. ? ??? ???? ?? ??? ?? ? ????? ???? ??? ??????? (?? ? ????? ?? ?? ? ??? ?? ??? ??? ?? ??? ??? ??? ??????? ? ?? ?? ???? ?? ? ? ????. pros : ?? ????? ???? ?? ?? : Firefox 3.5 ????? ?????. ? ?? ??? ? ?? ??? ?????. ??? rgba ??? ???? ?? -moz-box-shadow : inset? ???? ??? ??? ????. Box Shadow Effects? ?? ????? (?? ???? ??? ????? ???)? ???? ???? ??? ?? ? ??? ???. ???? ?? ?? ??? ?? ???? ???? ? ???? ??? ? ????.? ??? Firefox 3.5 ????? ?????. Safari? Box-Shadow (-webkit-box-shadow)? ????? ??? ?? ??? ????. : ??? ???? ???? ???? -webkit ??? ?? ? ? ??? ?????, ??? ??? ?? ??? ? ? ?? ??? ?? ? ? ?? ??? ?? ? ? ?? ??? ?? ? ? ?? ????. ??

img.beveled{    position:relative;}img.beveled:after{    position:absolute;    left:0;    top:0;    display:block;    content:"0a0";    box-sizing:border-box;    width:100%;    height:100%;    border:5px solid;    border-color:rgba(255,255,255,0.4)                 rgba(0,0,0,0.4)                 rgba(0,0,0,0.4)                 rgba(255,255,255,0.4);}

? ???? ?? ??? ?? ??? ???? ????? ?? html

<img  src="stormtroopers.jpg"     alt="A legion of Lego Stormtroopers, standing in formation." />

??? ?????. ????? ? ?? ??? ????? ? ?? ??? ???? ????. ??, ?? ? ??? ?? ? ?? ??? ? ?????. ? ???, ??? rgba

?? ??? 16 ??

??? ??? ??? ?? ?? ??? ????? ?????. Internet Explorer??? ??? ?? ? ? ?????? :

• ?? ??
?? ?? ??? ?? ???? ??? ???? ? ????? ??? ??? ??? ?? ??? ?? ??? ????? ???? ?? ?? ? ? ????. ??? ?? ????? ??? ??? ????. ???? ?? ???????! css ? ?? ???? ??? ?? ?? ?? ?? ?? (FAQ) CSS? ?? ???? ?????? CSS? ?? ???? ??? ?? ??? 3 ?? ????? ????? ??? ?????. ? ??? ??? ?? ??? ?? ??? ???? ?????. Bevel ??? ? ???? ??? ???? ?? ??? ????? ????? ????? ????.

CSS? ???? ?? ???? ?? ? ????? CSS? ???? ?? ???? ??? ??? ???? ??? ??? ???? ?? ??? ????. ??? ??? ??? ???? ??? ???? "???", "??", "??", "??", "???", "??", "??"?? "??"?? ??? ? ????. "???", "??", "??"? "??"???? ?? ??? ?? ? ????. ??? ? ??? ?? ??? ???? ?? ???? ??? ??? ??? ? ????. CSS3? ??? ???? ?? ? ?????

?, CSS3? ?? ???? ?? ? ????. CSS3??? ???? ???? ?? ??? ??? ? ??? ??? ??? ??? ?? ?????. ?? ??, Box-Shadow ??? ???? ???? ???? ?????? ??? ?? ??? ????. ?? ??? ??? ??? ???? ???? ???? ???? ??? ? ?? ??? ????.

CSS? ??? ??? ?? ?? ??? ??? ?? ? ? ?????

CSS?? ??? ??? ?? ?? ?? ??? ??? ???? ??? ?? ?????. ??? ???, ??? ? ?? ?? ??? ???? ?? ??? ?? ? ????. Box-Shadow ??? ???? ???? ???? ???? ?? ??? ???? ? ????. ?? ??-???? ??? ???? ??? ??? ???? ??????? ???? ??? ?? ??? ????.

CSS Bevel ???? ???? ? ?? ??? ??????

CSS Bevel ???? ???? ? ?? ??? ????. ?? ??? ??? ???? ??? ???? ??? ? ????. "???", "??", "??"? "??"???? ?? ??? ?? ? ????. ??? ? ???? ??? ???? ???? ??? ??? ??? ? ????. ?? Box-Shadow ??? ???? ??? ???? ???? ?? ??? ???? ? ????.

CSS3?? ?? ??? ??? ?? ? ? ?????

CSS3?? ?? ??? ??? ?? ??? ??? ?? ???? ?? ??? ????. Box-Shadow ??? ???? ???? ???? ?????? ??? ?? ??? ????. ?? ??? ??? ???? ???? ???? ???? ???? ? ?? ??? ????. ?? Border-Radius ??? ???? ??? ???? ??????? ???? ??? ?? ??? ????.

?? ???? ??? ? CSS ???? ??? ??????

CSS ??? ??? ???? ??? ? ??? ??????. ??? ??? ?????? ???? 3 ?? ????? ????? ?? ??? ?? ? ????. ?? ???, ?? ? ? ?? ?? ??? ???? ?? ??? ?? ? ? ????. "???", "??", "??"? "??"???? ?? ??? ?? ? ????.

CSS3?? ??? ??? ?? ?? ??? ?? ? ????? CSS3??? ???? ???? ?? ??? ??? ? ??? ??? ??? ??? ?? ?????. ?? ??, Box-Shadow ??? ???? ???? ???? ???? ?? ??? ???? ? ????. ?? ??? ??? ??? ???? ???? ???? ???? ????? ?? ??? ????. CSS?? ??? ?? ??? ??? ?? ? ?????

CSS?? ???? ? ?? ??? ??? ?? ?? ??? ??? ???? ?? ??? ????. ? ??? ???? ???? ??? ??? ?? ? ? ????. ?????? ???? ???? ??? ? ?? ??? ?? ? ????. ?? Border-Image-Slice ??? ???? ???? ??? ???? ?????? ??? ??? ? ????.

?? ?????? CSS??? ?? ???? ?? ? ?????

???? ??? ????? ??? ???? ??? ? ???? CSS ??? ???? ??, ???? ??? ?? ???? ???? ? ?? ????? ? ????. ??? ?? ?????? CSS ??? ????? ?? ??? ?? ??? ????? ???? ?? ?????. ?? ???? ???? ?? ?????? ???? ?? ? ?? ????.