h3cs1224(h3cs1224说明书)-j9九游会登录

1.竖向定线

如果你使用css，你会很困惑:我如何垂直对齐容器中的元素？现在，随着css3的转变，这种困惑可以得到很好的解决:

。verticalcenter{ position:相对；top:50%；-webkit-transform:translate y(-50%)；-o-transform:translate y(-50%)；transform:translate y(-50%)；}使用这种技术，从单行文本、段落到方框的所有内容都将垂直对齐。目前浏览器对transform的支持需要注意，

chrome 4、opera 10、safari 3、firefox 3、internet explorer 9都支持这个属性。

2.将元素拉伸到窗口的高度。

在特定场景中，您可能希望将元素延伸到窗口的高度。基本元素的调整只能调整容器的大小，所以要扩展一个元素到窗口的高度，

我们需要扩展顶级元素:html和body:

html，body { height:100%；}然后对任何元素的高度应用100%

div {高度:100%；}

3.根据文件格式使用不同的样式。

为了更容易地了解链接的目标，有时您希望一些链接看起来与其他链接不同。以下片段在文本链接前添加了一个图标，对不同的资源使用不同的图标或图片:

a[href^=”http://”]{填充-右:20px背景:不重复居中右；}/*邮件*/a[href^=”mailto:”]{填充-右:20px背景:不重复居中右；}/* pdf */a[href $ =”。pdf”]{右填充:20px背景:不重复居中右移；}

4.创建跨浏览器图像灰度。

有时候灰度看起来简单优雅，可以为网站呈现更深的基调。在示例中，我们将向svg图像添加灰度过滤:

& ltsvg xmlns = ” http://www . w3 . org/2000/svg ” & gt；& ltfilter id= “灰度” & gt& ltfecolormatrix type = ” matrix ” values = ” 0.3333 0.3333 0 0.3333 0.3333 0.3333 0 0.3333 0.3333 0.3333 0.3333 0 0 0 0 0 0 0 0 0 0 1 0 “/>& lt/filter & gt；& lt/svg & gt；对于跨浏览器，将使用过滤器属性:

img { filter:；/*火狐3.5 */滤镜:灰色；/* ie6-9 */ -webkit-filter:灰度(1)；/*谷歌浏览器、safari 6 & amp；opera 15 */}

5.背景渐变动画

css最吸引人的特性之一是添加动画效果的能力。除了渐变，你可以添加动画到背景颜色，透明度和元素大小。目前，您不能将动画添加到渐变中，但下面的代码可能会有所帮助。它通过改变背景位置使它看起来很生动。

按钮{背景-图像:线性-渐变(#5187c4，# 1c2f 45)；背景尺寸:自动200%；背景-位置:0 100%；过渡:背景-位置0.5s}按钮:hover { background-position:0 0；}

6.css:表格列宽自适应。

对于表格来说，当涉及到调整列宽时，这是很痛苦的。那么，这里有一个可以使用的技巧:给td元素添加white-space:nowrap；使文本正确换行。

td {空白:nowrap}

7.仅在一侧或两侧显示方框阴影。

如果你想要一个方框阴影，试试这个技巧，它可以给两边都加上阴影。要实现这一点，首先定义一个特定宽度和高度的盒子，然后正确定位:伪类之后。实现底部阴影的代码如下

。方框阴影{ background-color:# ff 8020；宽度:160px高度:90pxmargin-top:-45px；左边距:-80px；位置:绝对；top:50%；左:50%；}.方框阴影:在{内容: “”之后；宽度:150px高度:1px边距-顶部:88px左边距:-75px；显示:块；位置:绝对；左:50%；z索引:-1；-webkit-box-shadow:0px 0px 8px 2px # 000000；-moz-box-shadow:0px 0px 8px 2px # 000000；盒影:0px 0px 8px 2px # 000000}

8.包裹长文本

如果您遇到一个比它自己的容器还长的文本，这种技术对您非常有用。在本例中，默认情况下，无论容器的宽度如何，文本都将水平填充。

简单的css代码可以调整容器中的文本:

前置{空白:前置行；自动换行:断字；}效果看起来如下:

9.制作模糊文本。

想模糊文字？它可以通过颜色透明和文本阴影来实现。

。模糊文本{ color:透明；text-shadow: 0 0 5px rgba(0，0，0，0.5)；}

10.用css动画实现省略号动画。

此剪辑将帮助您创建省略号的动画，这对于简单的加载状态非常有用，无需使用gif图像。

。正在加载:{溢出:隐藏后；显示:内嵌-块；垂直对齐:底部；动画:省略号2s无限；内容:“\ 2026”；/*省略号字符*/}@keyframes省略号的ascii代码{ from { width:2px；}到{ width:15px；}}

1.样式重置

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, all, 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, n, 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, n, 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; }

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，all，strike，strong，sub，sup，tt，var，b，u，i，center，dl，dt，dd，ol，ul，li，fieldset，form，label，legend，table，caption，tbody，tbody填充:0；边框:0；字体大小:100%；字体:继承；垂直对齐:基线；大纲:无；-webkit-box-sizing:border-box；moz-box-sizing:border-box；框大小:边框-框；}html {高度:101%；} body { font-size:62.5%；行高:1；字体系列:arial、tahoma、sans-serif；}文章、旁白、详细信息、图片标题、图表、页脚、页眉、hgroup、菜单、导航、section { display:block；}ol，ul { list-style:none；}blockquote，q { quotes:none；}blockquote:before，blockquote:after，q:before，q:after { content:’ ‘；内容:无；} strong { font-weight:bold；}表{ border-collapse:collapse；边框间距:0；} img { border:0；最大宽度:100%；} p { font-size:1.2 em；行高:1.0厘米；颜色:# 333；}

12.典型的css清除浮动

。clearfix:在{内容:” “之后。；显示:块；明确:两者都有；可见性:隐藏；行高:0；高度:0；}.clear fix { display:inline-block；}html[xmlns]。clear fix { display:block；}* html。clearfix {高度:1%；}

13.新版清漂(2011)

。clearfix:之前，。容器:在{内容:“”之后；显示:表格；}.clear fix:after { clear:both；}/* ie 6/7 */。clear fix { zoom:1；}

14.跨浏览器透明

。透明{滤镜:alpha(不透明度= 50)；/* internet explorer */-khtml-不透明度:0.5；/* khtml，老safari */-moz-不透明度:0.5；/* mozilla，netscape */opacity:0.5；/* fx、safari、opera */}

15.css参考模板

block quote { background:# f9f9f 9；边框-左侧:10px实心# ccc边距:1.5em 10px填充:. 5em 10px引号:” \ 201c ” ” \ 201d ” ” \ 2018 ” ” \ 2019} block quote:before { color:# ccc；内容:公开报价；字体大小:4em行高:. 1em右边距:. 25em垂直对齐:-. 4em；} block quote p { display:inline；}

16、个性圆角

# container {-webkit-border-radius:4px 3px 6px 10px；-moz-border-radius:4px 3px 6px 10px；-o-border-radius:4px 3px 6px 10px；边框-半径:4px 3px 6px 10px}/*替换语法分成每行*/# 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-top left:4px；-moz-border-radius-top right:3px；-moz-border-radius-bottom right:6px；-moz-border-radius-bottom left:10px；}

17.一般媒体调查

/*智能手机(纵向和横向)-*/@纯媒体屏幕和(最小设备宽度:320px)和(最大设备宽度:480px) { /* styles */} /*智能手机(横向)-*/@纯媒体屏幕和(最小宽度:321px) { /* styles */}/*智能手机(纵向)-*/@纯媒体屏幕和(最大宽度:320 px){/* styles */}/* ipad(纵向和横向)-*/@纯媒体屏幕和 @仅媒体屏幕和(最小设备宽度:768px)和(最大设备宽度:1024px)和(方向:横向){ /* styles */}/* ipad(纵向)-*/@仅媒体屏幕和(最小设备宽度:768px)和(最大设备宽度:1024px)和(方向:纵向){/* styles */}/*台式机和笔记本电脑-*/@仅媒体屏幕和(最小宽度:1224px) { /*

8.现代字体堆栈

/* times new roman based serif */font-family:cambria，” hoefler text “，utopia，” liberation serif “，” nimbus roman no9 l regular “，times，” times new roman “，serif；/*一个现代的基于格鲁吉亚的衬线*/font-family: constantia，” lucidabright “，lucida bright，” lucida serif “，lucida，” deju serif “，” bitstream vera serif “，” liberation serif “，格鲁吉亚，serif；/*更传统的基于garamond的serif */font-family:” palatino linotype “，palatino，palladio，” urw palladio l “，” book antiqua “，baskerville，” bookman old style “，” bitstream charter “，” nimbus roman no9 l “，garamond，” apple garamond “，” itc garamond narrow “，” new century schoolbook “，” century schoolbook “，” century schoolbook l “，georgia，serif；/*基于helvetica/arial的sans serif */font-family:frutiger，” frutiger linotype “，univers，calibri，” gill sans “，” gill sans mt “，” myriad pro “，myriad，” deju sans condensed “，” liberation sans “，” nimbus sans l “，tahoma，geneva，” helvetica neue “，helvetica，arial，sans-serif；/*基于verdana的sans serif */font-family: corbel，” lucida grande “，” lucida sans unicode “，” lucida sans “，” deju sans “，” bitstream vera sans “，” liberation sans “，verdana，” verdana ref “，sans-serif；/*基于trebuchet的sans serif */font-family:” segoe ui “，candara，” bitstream vera sans “，” deju sans “，” bitstream vera sans “，” trebuchet ms “，verdana，” verdana ref “，sans-serif；/*较重的“impact”无衬线*/font-family: impact、haettenschweiler、“franklin gothic bold”、木炭、“helvetica insera”、“bitstream vera sans bold”、“arial black”、无衬线；/* monospace */font-family:consolas、” andale mono wt “、” andale mono “、” lucida console “、” lucida sans typewriter “、” deju sans mono “、” bitstream vera sans mono “、” liberation mono “、” nimbus mono l “、monaco、” courier new “、courier、monospace；

19.自定义文本选择

*选择{背景:# e2eae2}::-moz-selection {背景:# e2eae2}::-webkit-selection {背景:# e2eae2}

20.隐藏h1的标志

h1 { text-indent:-9999 px；边距:0自动；宽度:320px身高:85px背景:透明无重复滚动；}

1.图像边界的极化

img.polaroid {背景:# 000；/*将其更改为背景图像或删除*/border:solid # fff；边框-宽度:6px 6px 20px 6pxbox-shadow:1px 1px 5px # 333；/* 5px标准模糊。增加更多深度*/-webkit-box-shadow:1px 1px 5px # 333；-moz-box-shadow:1px 1px 5px # 333；高度:200px/*设置为图像的高度或所需的div */width:200 px；/*设置为图像的宽度或所需的div*/}

22.锚链接伪类

答:链接{颜色:蓝色；}a:参观过{颜色:紫色；} a:hover { color:red；}a:主动{颜色:黄色；}

23.奇怪的css引用

。has-pullquote:before { /*重置指标。*/填充:0；边框:无；/* content */content:attr(data-pull quote)；/*向右拉，基于模块比例的边距。*/ float:右；宽度:320px边距:12px-140 px 24px 36px；/*基线校正*/位置:相对；top:5px；/*版式(30px行高等于25%的递增行距)*/font-size:23px；行高:30px}.pullquote-adelle:在{ font-family: “adelle-1 “，” adelle-2 “之前；字体粗细:100；top: 10px！重要；}.pull quote-helvetica:before { font-family:“helvetica新”，arial，sans-serif；字体粗细:粗体；顶:7px！重要；}.pullquote-facit:前{ font-family: “facitweb-1 “，” facitweb-2 “，helvetica，arial，sans-serif；字体粗细:粗体；顶:7px！重要；}

24.css3:全屏背景

html { background:无重复居中居中修复；-webkit-背景-大小:封面；-moz-背景-尺寸:封面；-o-背景-尺寸:封面；背景-尺寸:封面；}

25.内容垂直居中。

。集装箱{最小高度:6.5毫米；显示:表格单元；垂直对齐:居中；}

26.强制垂直滚动条

html { height: 101% }

27.css3渐变模板

# colorbox { background:# 629721；背景-图像:-webkit-渐变(线性，左上，左下，从(#83b842)，到(# 629721))；背景-图像:-webkit-线性-渐变(top，#83b842，# 629721)；背景-图像:-moz-线性-渐变(top，#83b842，# 629721)；背景-图像:-ms-线性-渐变(顶部，#83b842，# 629721)；背景-图像:-o-线性-渐变(顶部，#83b842，# 629721)；背景图像:线性渐变(顶部，#83b842，# 629721)；}

28.@font-face模板

@ font-face { font-family:’ myweb font ‘；src:；/* ie9兼容模式*/ src: 格式(‘ embedded-opentype ‘)，/* ie6-ie8 */ 格式(‘ woff ‘)，/* modern browsers */格式(‘ truetype ‘)，/* safari，android，ios */格式(‘ svg ‘)；/*传统ios */} body { font-family:’ myweb font ‘，arial，sans-serif；}

29.缝合css3元素。

p {位置:相对；z指数:1；填充:10px边距:10px字体大小:21px行高:1.3厘米；颜色:# fff背景:# ff0030-webkit-box-shadow:0 0 4px # ff 0030，2px 1px 4px 4px rgba(10，10，0，. 5)；-moz-box-shadow:0 0 4px # ff 0030，2px 1px 4px 4px rgba(10，10，0，. 5)；box-shadow:0 0 4px # ff 0030，2px 1px 6px 4px rgba(10，10，0，. 5)；-webkit-border-radius:3px；-moz-border-radius:3px；边框半径:3px}p:前{内容:“”；位置:绝对；z索引:-1；top:3px；底部:3px左:3px右:3px边框:2px虚线# fff} p a { color:# fff；文字-装饰:无；}p a:悬停，p a:聚焦，p a:主动{ text-decoration:下划线；}

30.css3斑马线

tbody tr:n-child(奇数){

背景色:# ccc}

31.有趣的

。amp { font-family: baskerville，’ goudy old style ‘，palatino，’ book antiqua ‘，serif字体样式:斜体；字体粗细:正常；}

32.大段文字

p:首字母{ display:block；保证金:5px 0 0 5px浮动:左；颜色:# ff3366字号:5.4em字体系列:乔治亚，times new roman，serif}

33.内部css3框的阴影

# my div {-moz-box-shadow:inset 2px 0 4px # 000；-webkit-box-shadow:inset 2px 0 4px # 000；方框阴影:inset 2px 0 4px # 000}

34.外部css3框的阴影

# my div {-webkit-box-shadow:0 2px 2px-2px rgba(0，0，0，0.52)；-moz-box-shadow:0 2px 2px-2px rgba(0，0，0，0.52)；box-shadow: 0 2px 2px -2px rgba(0，0，0，0.52)；}

35、三角形列表项目符号

ul { margin:0.75 em 0；填充:0 1em列表样式:无；}李:前{内容:“”；边框颜色:透明# 111；边框样式:纯色；边框宽度:0.35 em 0.35 em 0.45 em；显示:块；高度:0；宽度:0；左:-1em；top:0.9 em；位置:相对；}

36.固定宽度居中布局

#自动换行{ width:800 px；边距:0自动；}

37.css3列文本

# columns-3 { text-align:justify；-moz-column-count:3；-moz-column-gap:12px；-moz-column-rule:1px solid # c4 c8 cc；-webkit-column-count:3；-webkit-column-gap:12px；-webkit-column-rule:1px solid # c4 c8 cc；}

38.css固定页脚

#footer {位置:固定；左:0px底部:0px高度:30px宽度:100%；背景:# 444；}/* ie 6 */* html # footer { position:absolute；top:expression((0-(footer . offset height) (document . document element . client height？document . document element . client height:document . body . client height) (ignore me = document . document element . scroll top？document . document element . scroll top:document . body . scroll top)) ’ px ‘)；}

39.png透明修复ie6

.bg { width:200px; height:100px; background: no-repeat; _background:none; _filter:progid:dximagetransform.microsoft.alphaimageloader(src=’/folder/yourimage.png’,sizingmethod=’crop’);}/* 1px gif method */img, .png { position: relative; behior: expression((this.runtimestyle.behior=”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/transparent.gif”):(this.origbg = this.origbg? this.origbg :this.currentstyle.backgroundimage.tostring().replace(‘.replace(‘”)’,”), this.runtimestyle.filter = “progid:dximagetransform.microsoft.alphaimageloader(src='” this.origbg “‘, sizingmethod=’crop’)”, this.runtimestyle.backgroundimage = “none”)),this.pngset=true));}

40、跨浏览器设置最小高度。bg { width:200 px；高度:100px背景:no-repeat；_背景:无；_ filter:progid:dximagetransform。microsoft . alpha image loader(src = ‘/folder/your image . png ‘，sizing method = ‘ crop ‘)；}/* 1px gif方法*/img，。png { position:相对；行为:表达式((this . runtime style . behior = ” none “)& amp；& amp(this.pngset？this . png set = true:(this . nodename = = ” img ” & amp；& ampthis.src.tolowercase()。indexof(‘。png ‘)& gt；-1?(this . runtime style . background image = ” none “，this . runtime style . filter = ” progid:dximagetransform。microsoft . alpha image loader(src = ‘ “ this . src ” ‘，sizingmethod=’image ‘)”，this . src = ” images/transparent . gif “):(this . orig bg = this . orig bg？this . orig bg:this . current style . background image . tostring()。替换(‘ 。replace(” “)，”)，this . runtime style . filter = ” progid:dximagetransform。microsoft . alpha image loader(src = ‘ “ this . origbg ” ‘，sizingmethod=’crop ‘)”，this . runtime style . background image = ” none “))，this . png set = true)；}40.设置跨浏览器的最小高度。

#容器{最小高度:550px身高:自动！重要；高度:550px}41、css3亮输入

input[type=text]，textarea { -webkit-transition:全0.30s渐出；-moz-transition:全0.30s缓入缓出；-ms-transition:全0.30s缓入缓出；-o-transition:全0.30s缓入缓出；大纲:无；填充:3px 0px 3px 3px边距:5px 1px 3px 0px边框:1px solid # ddd}input[type=text]:focus，textarea:focus { box-shadow:0 0 5px rgba(81，203，238，1)；填充:3px 0px 3px 3px边距:5px 1px 3px 0px边框:1px实心rgba(81，203，238，1)；}42.基于文件类型的链接样式

/*外部链接*/a[href^=”http:// “]{ padding-right:13px；背景:不重复居中右移；}/*电子邮件*/a[href^=”mailto: “]{ padding-right:20px；背景:不重复居中右移；}/* pdf */a[href $ =”。pdf”] {右填充:18px背景:不重复居中右移；}

4.强制换行

pre {空白:预换行；/* css-3 */空白:-moz-预换行；/* mozilla，自1999年以来*/空白:-预换行；/* opera 4-6 */空白:-o-预换行；/* opera 7 */自动换行:断字；/* internet explorer 5.5 */}

4.在可点击的项目上强制手形。

一个[href]，输入[type=’submit’]，输入[type=’image’]，标签[for]，选择，按钮，。指针{ cursor:pointer；}

45.网页顶部的方框阴影

正文:在{内容:“”之前；位置:固定；top:-10px；左:0；宽度:100%；高度:10px-webkit-box-shadow:0px 0px 10px rgba(0，0，0，. 8)；-moz-box-shadow:0px 0px 10px rgba(0，0，0，. 8)；box-shadow: 0px 0px 10px rgba(0，0，0，.. 8)；z指数:100；}

46、css3对话泡泡

。聊天气泡{ background-color:# eded；边框:2px纯色# 666；字体大小:35px行高:1.3厘米；边距:10px自动；填充:10px位置:相对；文本对齐:居中；宽度:300px-moz-border-radius:20px；-webkit-border-radius:20px；-moz-box-shadow:0 0 5px # 888；-webkit-box-shadow:0 0 5px # 888；字体系列:“bangers”，arial，serif}.聊天-气泡-箭头-边框{ border-color: #666透明透明透明；边框样式:纯色；边框宽度:20px高度:0；宽度:0；位置:绝对；底部:-42px；左:30px}.聊天-气泡-箭头{ border-color:# eded透明透明透明；边框样式:纯色；边框宽度:20px高度:0；宽度:0；位置:绝对；底部:-39px；左:30px}

47、h1-h5默认风格

h1、h2、h3、h4、h5 { color:# 005 a9c；} h1 { font-size:2.6 em；行高:2.45厘米；} h2 { font-size:2.1 em；行高:1.9厘米；} h3 { font-size:1.8 em；行高:1.65厘米；} h4 { font-size:1.65 em；行高:1.4厘米；} h5 { font-size:1.4 em；行高:1.25厘米；}

48.纯css背景噪音

body { background-image:. “；反增量:章；字体粗细:粗体；浮动:左；宽度:40px}ol.chapters李{清:左；}ol.start {计数器重置:章节；}ol.continue {计数器重置:第11章；}

50.css浮动提示文本

a { border-bottom:1px solid # bbb；颜色:# 666；显示:内嵌-块；位置:相对；文字-装饰:无；}a:悬停，a:聚焦{ color:# 36c；} a:active { top:1px；}/*工具提示样式*/a[data-tooltip]:在{ border-top:8px solid # 222；border-top: 8px固体hsla(0，0%，0%，. 85)；border-left: 8px纯色透明；border-right: 8px纯色透明；内容:“”；显示:无；高度:0；宽度:0；左:25%；位置:绝对；}a[data-tooltip]:在{ background:# 222；背景:hsla(0，0%，0%，. 85)；颜色:# f6f6f6内容:attr(数据-工具提示)；显示:无；字体系列:无衬线字体；字体大小:14px高度:32px左:0；行高:32px填充:0 15px位置:绝对；text-shadow: 0 1px 1px hsla(0，0%，0%，1)；空白:nowrap-webkit-border-radius:5px；-moz-border-radius:5px；-o-border-radius:5px；边框半径:5px} a[data-tooltip]:hover:after { display:block；top:-9px；}a[data-tooltip]:悬停:之前{ display:block；top:-41px；} a[data-tooltip]:active:after { top:-10px；} a[data-tooltip]:active:before { top:-42px；}

51.深灰色圆形按钮

。gray btn {-moz-box-shadow:inset 0px 1px 0px 0px # ffffff；-webkit-box-shadow:inset 0px 1px 0px 0px # ffffff；box-shadow:inset 0px 1px 0px 0px # ffffff；背景:-webkit-gradient(线性，左上，左下，色停(0.05，#ffffff)，色停(1，# d1 d1 d1))；背景:-moz-linear-gradient(中心顶部，#ffffff 5%，# d1d1d 1 100%)；过滤器:progid:dximagetransform。microsoft . gradient(startcolorstr = ‘ # ffffff ‘，endcolorstr = ‘ # d1 d1 d 1 ‘)；背景色:# ffffff-moz-border-radius:6px；-webkit-border-radius:6px；边框-半径:6px边框:1px solid # dcdcdc显示:内嵌-块；颜色:# 777777；字体系列:arial字号:15px字体粗细:粗体；填充:6px 24px文字-装饰:无；文本-阴影:1px 1px 0px # ffffff}.gray btn:hover { background:-webkit-gradient(linear，left top，left bottom，color-stop(0.05，#d1d1d1)，color-stop(1，# ffffff))；背景:-moz-linear-gradient(中心顶部，#d1d1d1 5%，# ffffff 100%)；过滤器:progid:dximagetransform。microsoft . gradient(startcolorstr = ‘ # d1d1d 1 ‘，endcolorstr = ‘ # ffffff ‘)；背景色:# d1d1d1}.gray btn:active { position:relative；top:1px；}

2.在可打印的网页中显示url

@ media print { a:after { content:”[” attr(href)”]”；} }

53.禁用移动webkit的选择突出显示。

body { -webkit-touch-callout:无；-webkit-用户选择:无；-khtml-user-select:无；-moz-user-select:无；-ms-user-select:无；用户选择:无；}

54.css3点模式

正文{背景:径向渐变(圆形，白色10%，透明10%)，径向渐变(圆形，白色10%，黑色10%)50px 50px；背景-尺寸:100px 100px}

55.css3方格图案

正文{背景色:白色；背景图像:线性梯度(45度，黑色25%，透明25%，透明75%，黑色75%，黑色)，线性梯度(45度，黑色25%，透明25%，透明75%，黑色75%，黑色)；背景-尺寸:100px 100px背景-位置:0 0，50px 50px}

56.github的叉带

。丝带{背景色:# a00溢出:隐藏；/*左上角*/位置:绝对；左:-3em；top:2.5 em；/* 45度逆时针旋转*/ -moz-transform:旋转(-45度)；-webkit-transform:旋转(-45度)；/* shadow */-moz-box-shadow:0 0 1em # 888；-webkit-box-shadow:0 0 1em # 888；}.丝带a { border:1px solid # faa；颜色:# fff显示:块；字体:粗体81.25% ‘helvetiva neue ‘，helvetica，arial，sans-serif；边距:0.05 em 0.075 em 0；填充:0.5em 3.5em文本对齐:居中；文字-装饰:无；/* shadow */text-shadow:0 0.5 em # 444；}

57.css字体属性的缩写

p { font:斜体小型大写加粗1.2em/1.0em arial，tahoma，helvetica；}

58.纸张的卷曲效果

ul.box { position:相对；z指数:1；/*防止阴影落在有背景的容器后面*/overflow:hidden；列表样式:无；边距:0；填充:0；}ul.box李{职务:相对；浮动:左；宽度:250px高度:150px填充:0；边框:1px solid # efefef边距:0 30px 30px 0背景:# fff-webkit-box-shadow:0 1px 4px rgba(0，0，0，0.27)，0 0 40px rgba(0，0，0，0.06)inset；-moz-box-shadow: 0 1px 4px rgba(0，0，0，0.27)，0 0 40px rgba(0，0，0，0.06)inset；方框阴影:0 1px 4px rgba(0，0，0，0.27)，0 0 40px rgba(0，0，0，0.06)inset；}ul.box li:之前，ul.box li:之后{ content:’ ‘；z索引:-1；位置:绝对；左:10px底部:10px宽度:70%；最大宽度:300像素；/*避免旋转造成大容器宽度的难看外观*/max-height:100 px；身高:55%；-webkit-box-shadow:0 8px 16px rgba(0，0，0，0.3)；-moz-box-shadow: 0 8px 16px rgba(0，0，0，0.3)；box-shadow: 0 8px 16px rgba(0，0，0，0.3)；-webkit-transform:倾斜(-15度)旋转(-6度)；-moz-transform:倾斜(-15度)旋转(-6度)；-ms-transform:倾斜(-15度)旋转(-6度)；-o-transform:倾斜(-15度)旋转(-6度)；变换:倾斜(-15度)旋转(-6度)；}ul.box李:后{左:自动；右:10px-webkit-transform:倾斜(15度)旋转(6度)；-moz-transform:倾斜(15度)旋转(6度)；-ms-transform:倾斜(15度)旋转(6度)；-o-transform:倾斜(15度)旋转(6度)；变换:倾斜(15度)旋转(6度)；}

59.明亮的锚链接

a { color:# 00e；}a:参观过{ color:# 551 a8b；} a:hover { color:# 06e；}a:焦点{轮廓:细虚线；}a:悬停，a:主动{大纲:0；}a，a:拜访过，a:主动{ text-decoration:无；颜色:# fff-webkit-transition:所有. 3s轻松进出；}答:悬停，。发光{ color:# ff0；text-shadow:0 0 10px # ff0；}

60.具有css3功能的横幅显示

。featurebanner { position:相对；边距:20px}。featurebanner:在{ content:“精选”之前；位置:绝对；top:5px；左:-8px；右填充:10px颜色:# 232323；字体粗细:粗体；高度:0px边框:15px纯色# ffa200边框-右边-颜色:透明；行高:0px框-影:-0px 5px 5px-5px # 000；z指数:1；}.featurebanner:在{ content:” “之后；位置:绝对；top:35px；左:-8px；边框:4px纯色# 89540c边框-左侧-颜色:透明；边框-底部-颜色:透明；}