30个值得收藏的CSS代码片段

这里收集了30个非常有用的CSS代码片段，非常值得大家去收藏，以备不时之需。

1、创建跨浏览器的图像灰度

如何将图片制作为灰度图片，而且在所有的浏览器中都表现一致呢？答案是结合使用svg和filter过滤器。

<svg xmlns=”http://www.w3.org/2000/svg”>

<filter id=”grayscale”>

<feColorMatrix type=”matrix” values=”0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0″/>

</filter>

</svg>

img {

filter: url(filters.svg#grayscale); /* Firefox 3.5+ */

filter: gray; /* IE6-9 */

-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */

}

2、元素垂直居中

要使一个元素相对于它的父元素垂直居中需要使用一些小技巧。

.ele{

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

-o-transform: translateY(-50%);

transform: translateY(-50%);

}

3、背景渐变动画

通常情况下，元素的渐变背景是不能制作动画效果的，你可以使用下面的代码来实现这个动画效果。实际上它是使用修改背景图片位置的方法来实现这个效果的。

button {

background-image: linear-gradient(#5187c4, #1c2f45);

background-size: auto 200%;

background-position: 0 100%;

transition: background-position 0.5s;

}   

button:hover {

background-position: 0 0;

}  

4、为超链接添加个性样式

有时候我们需要为不同的超链接设置不同的样式，使用户能够一眼就看出这个超链接的作用。下面的CSS代码将不同的超链接设置为不同的颜色，并为每个超链接设置不同的小图标。

a[href^=”http://”]{

padding-right: 20px;

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: 20px;

background: url(pdf.png) no-repeat center right;

} 

5、表格列宽自适应

要调整一个的表格的列宽是一件非常头疼的事情。你可以为td元素设置white-space: nowrap;，让文本在表格中自适应。

td {

white-space: nowrap;

}  

查看下面表格的前后比较效果。

非主动列宽的表格

自动列宽的表格

5、经典的CSS清除浮动

.clearfix:after { content: “.”; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }

* html .clearfix { height: 1%; }                         

6、最新的CSS清除浮动方法

.clearfix:before, .container:after { content: “”; display: table; }

.clearfix:after { clear: both; }

/* IE 6/7 */

.clearfix { zoom: 1; }

7、制作跨浏览器的透明度

.transparent {

filter: alpha(opacity=50); /* internet explorer */

-khtml-opacity: 0.5;      /* khtml, old safari */

-moz-opacity: 0.5;       /* mozilla, netscape */

opacity: 0.5;           /* fx, safari, opera */

}

8、制作模糊文字

.blurry-text {

   color: transparent;

   text-shadow: 0 0 5px rgba(0,0,0,0.5);

}

9、用CSS实现LOADING省略号动画

这段CSS代码使用CSS3的帧动画来模拟loading文字后面的3个小省略号的动画效果。

.loading:after {

overflow: hidden;

display: inline-block;

vertical-align: bottom;

animation: ellipsis 2s infinite;

content: “\2026”; /* ascii code for the ellipsis character */

}

@keyframes ellipsis {

from {

    width: 2px;

}

to {

    width: 15px;

}

}

10、不同弧度的圆角

#container {

-webkit-border-radius: 4px 3px 6px 10px;

-moz-border-radius: 4px 3px 6px 10px;

-o-border-radius: 4px 3px 6px 10px;

border-radius: 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-topleft: 4px;

-moz-border-radius-topright: 3px;

-moz-border-radius-bottomright: 6px;

-moz-border-radius-bottomleft: 10px;

}

11、通用媒体查询

/* Smartphones (portrait and landscape) ———– */

@media only screen

and (min-device-width : 320px) and (max-device-width : 480px) {

  /* Styles */

}

/* Smartphones (landscape) ———– */

@media only screen and (min-width : 321px) {

  /* Styles */

}

/* Smartphones (portrait) ———– */

@media only screen and (max-width : 320px) {

  /* Styles */

}

/* iPads (portrait and landscape) ———– */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

  /* Styles */

}

/* iPads (landscape) ———– */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

  /* Styles */

}

/* iPads (portrait) ———– */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

  /* Styles */

}

/* Desktops and laptops ———– */

@media only screen and (min-width : 1224px) {

  /* Styles */

}

/* Large screens ———– */

@media only screen and (min-width : 1824px) {

  /* Styles */

}

/* iPhone 4 ———– */

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {

  /* Styles */

}

12、自定义文本选择

正常情况下用鼠标选择一段文本是呈现蓝底白字的效果，使用下面的代码可以改变它们。

::selection { background: #e2eae2; }

::-moz-selection { background: #e2eae2; }

::-webkit-selection { background: #e2eae2; }   

DEMO:用鼠标选择这里的文字看看效果。

13、图片边框效果

下面的代码可以为你的图片添加漂亮的带阴影的边框效果。

img.polaroid {

background:#000; /*Change this to a background image or remove*/

border:solid #fff;

border-width:6px 6px 20px 6px;

box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */

-webkit-box-shadow:1px 1px 5px #333;

-moz-box-shadow:1px 1px 5px #333;

height:200px; /*Set to height of your image or desired div*/

width:200px; /*Set to width of your image or desired div*/

}

14、CSS全屏背景图片

全屏图片主要使用的是CSS的background-size属性。

html {

background: url(‘images/bg.jpg’) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

15、CSS3渐变模板

#colorbox {

background: #629721;

background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));

background-image: -webkit-linear-gradient(top, #83b842, #629721);

background-image: -moz-linear-gradient(top, #83b842, #629721);

background-image: -ms-linear-gradient(top, #83b842, #629721);

background-image: -o-linear-gradient(top, #83b842, #629721);

background-image: linear-gradient(top, #83b842, #629721);

}

16、@FONT-FACE模板

@font-face {

font-family: ‘MyWebFont’;

src: url(‘webfont.eot’); /* IE9 Compat Modes */

src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */

url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */

url(‘webfont.ttf’)  format(‘truetype’), /* Safari, Android, iOS */

url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */

}

body {

font-family: ‘MyWebFont’, Arial, sans-serif;

}

17、CSS3 斑马线

tbody tr:nth-child(odd) {

background-color: #ccc;

}

18、元素内阴影效果

#mydiv {

-moz-box-shadow: inset 2px 0 4px #000;

-webkit-box-shadow: inset 2px 0 4px #000;

box-shadow: inset 2px 0 4px #000;

}

19、元素外阴影效果

#mydiv {

-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);

}

20、CSS3多列文本布局

#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;

}

21、FOOTER固定在页面的顶部

你是否曾经想将页面的脚部固定在网页的底部呢？下面的代码可以帮你实现，并且添加了对IE6的支持。

#footer {

position: fixed;

left: 0px;

bottom: 0px;

height: 30px;

width: 100%;

background: #444;

}

/* IE 6 */

* 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’);

}

22、IE6的PNG透明修复

在IE6中，PNG图片无法显示透明像素。使用下面的代码可以修复这个BUG。

.bg {

width:200px;

height:100px;

background: url(/folder/yourimage.png) no-repeat;

_background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/folder/yourimage.png’,sizingMethod=’crop’);

}

/* 1px gif method */

img, .png {

position: relative;

behavior: expression((this.runtimeStyle.behavior=”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(‘url(“‘,”).replace(‘”)’,”),

   this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='” + this.origBg + “‘, sizingMethod=’crop’)”,

   this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true));

}

23、设置跨浏览器的元素最小高度

#container {

min-height: 550px;

height: auto !important;

height: 550px;

}

24、修改输入框的边框样式

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);

}

25、强制换行

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+ */

}

26、在所有可点击的元素使用手形鼠标样式

a[href], input[type=’submit’], input[type=’image’], label[for], select, button, .pointer {

cursor: pointer;

}

27、在可打印的网页中显示URLS

@media print   { 

  a:after { 

content: ” [” attr(href) “] “; 

  } 

}

28、禁用移动WEBKIT的选择高亮

body {

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}   

29、CSS3国际象棋棋盘格背景图案

body {

background-color: white;

background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),

linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);

background-size: 100px 100px;

background-position: 0 0, 50px 50px;

}

30、纯CSS3纸张阴影特效

ul.box {

position: relative;

z-index: 1; /* prevent shadows falling behind containers with backgrounds */

overflow: hidden;

list-style: none;

margin: 0;

padding: 0;

}

ul.box li {

position: relative;

float: left;

width: 250px;

height: 150px;

padding: 0;

border: 1px solid #efefef;

margin: 0 30px 30px 0;

background: #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;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

}

ul.box li:before,

ul.box li:after {

content: ”;

z-index: -1;

position: absolute;

left: 10px;

bottom: 10px;

width: 70%;

max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */

max-height: 100px;

height: 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: skew(-15deg) rotate(-6deg);

-moz-transform: skew(-15deg) rotate(-6deg);

-ms-transform: skew(-15deg) rotate(-6deg);

-o-transform: skew(-15deg) rotate(-6deg);

transform: skew(-15deg) rotate(-6deg);

}

ul.box li:after {

left: auto;

right: 10px;

-webkit-transform: skew(15deg) rotate(6deg);

-moz-transform: skew(15deg) rotate(6deg);

-ms-transform: skew(15deg) rotate(6deg);

-o-transform: skew(15deg) rotate(6deg);

transform: skew(15deg) rotate(6deg);

}

未经允许不得转载：爱前端网 » 30个值得收藏的CSS代码片段