31.css3文本框高亮

input[type=text], textarea {    -webkit-transition: all 0.30s ease-in-out;    -moz-transition: all 0.30s ease-in-out;    -ms-transition: all 0.30s ease-in-out;    -o-transition: all 0.30s ease-in-out;    outline: none;    padding: 3px 0px 3px 3px;    margin: 5px 1px 3px 0px;    border: 1px solid #ddd;}  input[type=text]:focus, textarea:focus {    box-shadow: 0 0 5px rgba(81, 203, 238, 1);    padding: 3px 0px 3px 3px;    margin: 5px 1px 3px 0px;    border: 1px solid rgba(81, 203, 238, 1);}

我非常喜欢这段基本的非常好用的css代码，因为它弥补了浏览器的缺陷。chrome和safari浏览器用户知道表单边框是多么烦人。在你的样式表中添加这段内容能让你基本的输入元素焕然一新。

32.基于文件类型的链接样式

/* external links */a[href^="http://"] {    padding-right: 13px;    background: url('external.gif') no-repeat center right;}  /* emails */a[href^="mailto:"] {    padding-right: 20px;    background: url('email.png') no-repeat center right;}  /* pdfs */a[href$=".pdf"] {    padding-right: 18px;    background: url('acrobat.png') no-repeat center right;}

尽管这段相当晦涩难懂，但我爱死它的创意了！你可以使用css选择器和工具图标作为背景图像来决定链接的文件类型。它们可以是各种协议（HTTP, FTP, IRC, mailto）或者仅仅是文件类型本身（mp3, avi, pdf）。

33.使用代码外层

pre {    white-space: pre-wrap;       /* css-3 */    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */    white-space: -pre-wrap;      /* Opera 4-6 */    white-space: -o-pre-wrap;    /* Opera 7 */    word-wrap: break-word;       /* Internet Explorer 5.5+ */}

这个典型的pre标签用于展示大的代码块。这是一段预格式化文本，你会在Notepad和Textedit中发现它们，除非你经常留意到冗长的代码产生的水平滚动条。css代码块会注意到所有的pre标签而不破坏容器内部。

34.使用可点击项目上的手型光标

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {    cursor: pointer;}

有很多默认可点击的html元素不总是显示手型指针光标。这套css选择器让你可以设置许多关键元素上的指针，当然也少不了使用 .pointer类。

35.页面顶端阴影

body:before {    content: "";    position: fixed;    top: -10px;    left: 0;    width: 100%;    height: 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-index: 100;}

不同于一些令人愉悦的美学，开发人员可能不会很好地使用这段代码，但是我非常喜欢它独特的作用！仅仅是添加一小段css代码就可以让你的主体元素显示从页面顶端向下的渐变的黑色阴影。