今天小编跟大家讲解下有关30个开发人员有用的CSS代码片段整理值得借鉴 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关30个开发人员有用的CSS代码片段整理值得借鉴 的相关资料，希望小伙伴们看了有所帮助。
CSS 是我们使用的功能强大和最常用web 语言。他可以兼容新旧不同的浏览器 他的兼容跨度确实够大的 从微软的IE到火狐再到谷歌浏览器。在设计的时候我们总是想创建更有创意和风格的网站 无论创建怎么样的网站 有些CSS代码是必须要掌握的 可以说这是核心 掌握这样的一些CSS代码 前端布局方面基本上再不成问题 什么边框圆角 工具提示 浏览器hacks等等都不是问题。 在今天的文章中分享我收藏的 30 个CSS 代码段 无论您是经验丰富的 web 设计师还是新手 他们都是非常值得借鉴的； Css Reset by Eric Meyer 复制代码代码如下: 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, font, 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 { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } 根据文件格式显示不同的链接样式 复制代码代码如下: a[href^="http://"]{ padding-right: 20px; background: url(external.gif) no-repeat center right; } a[href^="mailto:"]{ padding-right: 20px; background: url(email.png) no-repeat center right; } a[href$=".pdf"]{ padding-right: 20px; background: url(pdf.png) no-repeat center right; } 在IE浏览器删除textarea的滚动条 复制代码代码如下: textarea{ overflow:auto; } 浏览器特定的 hacks 复制代码代码如下: * html .yourclass { } *+html .yourclass{ } html>body .yourclass { } html>body .yourclass { } html:first-child .yourclass { } html[xmlns*=""] body:last-child .yourclass { } body:nth-of-type(1) .yourclass { } body:first-of-type .yourclass { } @media screen and (-webkit-min-device-pixel-ratio:0) { .yourclass { } } Clearfix 复制代码代码如下: .clearfix:after { visibility: hidden; display: block; font-size: 0; content:""; clear: both; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } 固定宽度且居中 复制代码代码如下: .wrapper { width:960px; margin:0 auto; } Rounded corners – border-radius 复制代码代码如下: .round{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; } 伪元素向文本的第一个字母添加特殊样式 复制代码代码如下: p:first-letter{ display:block; margin:5px 0 0 5px; float:left; color:#000; font-size:60px; font-family:Georgia; } 使用 @fontface 复制代码代码如下: @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } 跨浏览器的inline-block 复制代码代码如下: li { width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: 1; *display: inline; _height: 250px; } Fixed Footer 复制代码代码如下: #footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; } * 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'); } 更改内容区域的大小 复制代码代码如下: #content { width: 100%; margin: 0; float: none; } CSS3 Media Queries （这个不常用主要用于智能设备的判断显示不同的媒体） 复制代码代码如下: @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { } @media only screen and (min-width : 321px) { } @media only screen and (max-width : 320px) { } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { } @media only screen and (min-width : 1224px) { } @media only screen and (min-width : 1824px) { } @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { } 多背景图片 复制代码代码如下: #multiple-images { background: url(image_1.png) top left no-repeat, url(image_2.png) bottom left no-repeat, url(image_3.png) bottom right no-repeat; } 多列 复制代码代码如下: #columns-3 { text-align: justify; -moz-column-count: 3; -moz-column-gap: 12px; -moz-column-rule: 1px solid #c4c8cc; -webkit-column-count: 3; -webkit-column-gap: 12px; -webkit-column-rule: 1px solid #c4c8cc; } 在IE的最小高度 复制代码代码如下: .box { min-height:500px; height:auto !important; height:500px; } 突出显示文本样式 复制代码代码如下: ::selection { color: #000000; background-color: #FF0000; } ::-moz-selection { color: #000000; background: #FF0000; } Box Shadow 复制代码代码如下: box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); 占位符文本样式 复制代码代码如下: ::-webkit-input-placeholder { color: #ccc; font-style:italic } :-moz-placeholder { color: #ccc; font-style:italic } CSS3 3D文字效果 复制代码代码如下: h1 { text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } WebKit的边界半径修正 复制代码代码如下: -webkit-background-clip: padding-box; XBrowser的border-radius（CSS3PIE） 复制代码代码如下: .roundbox { -moz-border-radius:8px; -webkit-border-radius:8px; -khtml-border-radius:8px; border-radius:8px; behavior: url(/PIE.htc); } 更好的兼容IE浏览器的 复制代码代码如下: <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> CSS3工具提示（这个很实用 看我网站的导航工具提示效果) 复制代码代码如下: a { color: #900; text-decoration: none; } a:hover { color: red; position: relative; } a[title]:hover:after { content: attr(title); padding: 4px 8px; color: #333; position: absolute; left: 0; top: 100%; white-space: nowrap; z-index: 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 4px #222; -webkit-box-shadow: 0px 0px 4px #222; box-shadow: 0px 0px 4px #222; background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); } CSS3背景大小 复制代码代码如下: body { background: #000 url(http://birdoflight.files.wordpress.com/2009/10/frida-kahlo-1.jpg) center center fixed no-repeat; -moz-background-size: cover; background-size: cover; } @media only all and (max-width: 1024px) and (max-height: 768px) { body { -moz-background-size: 1024px 768px; background-size: 1024px 768px; } } 跨浏览器的CSS页面卷曲阴影 复制代码代码如下: .page-curl { position: relative; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); } .page-curl:after { z-index: -1; position: absolute; background: transparent; width: 70%; height: 55%; content: ''; right: 10px; bottom: 10px; -webkit-transform: skew(15deg) rotate(5deg); -webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); -moz-transform: skew(15deg) rotate(5deg); -moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); } .page-curl:before { z-index: -2; position: absolute; background: transparent; width: 70%; height: 55%; content: ''; left: 10px; bottom: 10px; -webkit-transform: skew(-15deg) rotate(-5deg); -webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); -moz-transform: skew(-15deg) rotate(-5deg); -moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); } CSS3模糊文字 复制代码代码如下: .blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); } 修复 IE6/7 margin/padding双倍 间距错误 复制代码代码如下: ul li { float: right; margin-right: 10px; *display: inline; _display: inline; } 链接伪类的顺序 复制代码代码如下: a:link {color: blue;} a:visited {color: purple;} a:hover {color: red;} a:active {color: yellow;} 响应布局的HTML meta标签 复制代码代码如下: <meta name="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1"> <meta name="HandheldFriendly"content="true">来源：爱蒂网
