大家好，关于60个实用CSS代码片段汇总很多朋友都还不太明白，今天小编就来为大家分享关于的知识，希望对各位有所帮助！
如果您使用CSS，您会感到困惑：如何垂直对齐容器中的元素？现在，使用CSS3 Transform，可以优雅地解决这个困惑：
.垂直中心{
相对位置：
顶部： 50%；
-webkit-transform: 翻译Y(-50%);
-o-transform: 翻译Y(-50%);
变换：翻译Y(-50%);
}
使用这种技术，从单行文本到段落再到框的所有内容都将垂直对齐。目前浏览器对Transform 的支持需要关注。
Chrome 4、Opera 10、Safari 3、Firefox 3 和Internet Explorer 9 支持此属性
2. 将元素拉伸到窗口的高度
在特定场景中，您可能希望将元素拉伸到窗口的高度。调整基本元素只能调整容器的大小，因此要使元素拉伸到窗口的高度，
我们需要拉伸顶部元素：html 和body:
html,
身体{
高度： 100%;
}
然后对任意元素的高度应用100%
div {
高度： 100%;
}
3.根据文件格式使用不同的样式
为了更容易地了解链接的去向，有时您希望某些链接看起来与其他链接不同。以下代码片段在文本链接之前添加一个图标，对不同的资源使用不同的图标或图像：
a[href^="http://"]{
内边距-right: 20px；
background: url(external.gif) 无重复中心偏右；
}
/* 电子邮件*/
a[href^="mailto:"]{
内边距-right: 20px；
background: url(email.png) 无重复居中右；
}
/* pdf */
a[href$=".pdf"]{
内边距-right: 20px；
background: url(pdf.png) 无重复居中右；
}
效果演示
4. 创建跨浏览器图像灰度
灰度有时看起来简约而优雅，可以给网站带来更深的基调。在示例中，我们将为SVG 图像添加灰度过滤：
出于跨浏览器的目的，使用过滤器属性：
图像{
filter: url(filters.svg#grayscale); /* 火狐3.5+ */
滤镜：灰色； /* IE6-9 */
-webkit-filter: 灰度(1); /* 谷歌浏览器、Safari 6+ Opera 15+ */
}
5.背景渐变动画
CSS 中最吸引人的功能之一是添加动画效果的能力。除了渐变之外，您还可以向背景颜色、透明度和元素大小添加动画。目前，您无法设置渐变动画，但下面的代码可能会有所帮助。它改变背景的位置，使其看起来动画。
按钮{
背景图像： 线性渐变(#5187c4, #1c2f45);
背景大小： 自动200%；
背景位置： 0 100%;
transition: 背景位置0.5s；
}
按钮：悬停{
背景位置： 0 0;
}
效果演示
6.CSS：表格列宽自适应
对于表格来说，当涉及到调整列宽时，就比较痛苦了。然后，您可以使用以下技巧：添加空白： nowrap；到td 元素以使文本正确换行。
TD{
空白： nowrap；
}
演示
7.仅在一侧或两侧显示框阴影
如果你想要一个盒子阴影，请尝试这个技巧来向任一侧添加阴影。要实现这一点，首先定义一个具有特定宽度和高度的框，然后正确定位：after 伪类。实现底部阴影的代码如下
.box-shadow {
背景颜色： #FF8020;
宽度： 160px；
高度： 90px；
边距-top: -45px；
边距-left: -80px；
绝对位置：
顶部： 50%；
剩余： 50%；
}
.box-shadow:after {
内容："";
宽度： 150px；
高度： 1px；
边距-top: 88px；
边距-left: -75px；
显示：块；
绝对位置：
剩余： 50%；
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
框阴影： 0px 0px 8px 2px #000000;
}
演示
8. 长文本换行
如果您遇到比其自身容器长的文本，此技巧可能会很有用。在此示例中，默认情况下，无论容器的宽度如何，文本都会水平填充。
简单的CSS代码可以调整容器中的文本：
预{
空白： 前行；
word-wrap: 断字；
}
效果如下：
9. 创建模糊文本
想要模糊文字吗？可以使用颜色透明度和文本阴影来实现
.模糊文本{
颜色：透明；
文本阴影： 0 0 5px rgba(0,0,0,0.5);
}
演示
10.使用CSS动画实现省略号动画
此代码片段将帮助您创建省略号动画，对于简单的加载状态很有用，而无需使用gif 图像。
.loading:after {
溢出：隐藏；
display: 内联块；
垂直对齐：底部；
Animation: 省略号2s 无限；
content: "2026"; /* 省略号字符的ascii 代码*/
}
@关键帧省略号{
从{
宽度： 2px；
}
到{
宽度： 15px；
}
}
演示
11.风格重置
html、body、div、span、applet、object、iframe、h1、h2、h3、h4、h5、h6、p、块引用、pre、a、缩写、首字母缩略词、地址、大、引用、代码、del、dfn、 em、img、ins、kbd、q、s、samp、小、strike、strong、sub、sup、tt、var、b、u、i、center、dl、dt、dd、ol、ul、li、fieldset、表单、标签、图例、表格、标题、tbody、tfoot、thead、tr、th、td、文章、旁白、画布、详细信息、嵌入、图、figcaption、页脚、页眉、hgroup、菜单、导航、输出、ruby、章节、摘要、时间、标记、音频、视频{
边距： 0;
填充： 0；
边框： 0;
字体大小： 100%；
font: 继承；
垂直对齐：基线；
大纲： 无；
-webkit-box-sizing: 边框框；
-moz-box-sizing: 边框框；
box-sizing: 边框框；
}
html { height: 101%; }
正文{ 字体大小： 62.5%;行高： 1; font-family: Arial、Tahoma、无衬线字体； }
文章、旁白、详细信息、figcaption、图、页脚、页眉、hgroup、菜单、导航、部分{ display: 块； }
ol, ul { 列表样式： 无； }
blockquote, q {quotes: 无； }
blockquote:before、blockquote:after、q:before、q:after { content: ""; content: 无； }
强{ font-weight: 粗体； }
表{ border-collapse: 折叠；边框间距： 0; }
img { border: 0;最大宽度： 100%； }
p { 字体大小： 1.2em;行高： 1.0em；颜色： #333; }
12. 典型的CSS 透明浮动
.clearfix:after { content: ".";显示：块；清除：两者；可见性： 隐藏；行高： 0;高度： 0; }
.clearfix { display: 内联块； }
html[xmlns] .clearfix { display: 块； }
* html .clearfix { height: 1%; }
13.新版本清除浮动（2011）
.clearfix:before,container:after { content: "";显示：表； }
.clearfix:after {clear: 两者； }
/* IE 6/7 */
.clearfix { Zoom: 1; }
14. 跨浏览器透明度。透明的{
filter: alpha(不透明度=50); /* 互联网浏览器*/
-khtml-opacity: 0.5； /* khtml，旧的safari */
-moz-opacity: 0.5； /* 莫兹拉、网景*/
不透明度： 0.5； /* FX、Safari、歌剧*/
}
15.CSS参考模板
块引用{
背景： #f9f9f9;
border-left: 10px 实线#ccc；
边距： 1.5em 10px；
内边距：5em 10px；
quote: "201C""201D""2018""2019";
}
块引用：之前{
color:#ccc；
content: 开放式报价；
字体大小： 4em；
行高：1em；
边距-right:25em；
垂直对齐： -.4em；
}
块引用p {
显示：内联；
}
16.个性化圆角
容器{
-webkit-border-radius: 4px 3px 6px 10px;
-moz-边框-半径： 4px 3px 6px 10px；
-o-边框半径： 4px 3px 6px 10px;
边框半径： 4px 3px 6px 10px;
}
/* 分解为每一行的替代语法*/
容器{
-webkit-边框-左上-半径： 4px；
-webkit-边框-右上-半径： 3px；
-webkit-border-bottom-right-radius: 6px;
-webkit-边框-左下半径： 10px；
-moz-边框-半径-topleft: 4px；
-moz-边框-半径-topright: 3px；
-moz-边框-半径-bottomright: 6px；
-moz-边框-半径-bottomleft: 10px；
}
17. 一般媒体查询
/* 智能手机（纵向和横向）---------- */
@仅媒体屏幕
和（最小设备宽度： 320px）和（最大设备宽度： 480px）{
/* 样式*/
}
/* 智能手机（横向） ----------- */
@media only 屏幕和（最小宽度： 321px）{
/* 样式*/
}
/* 智能手机（纵向） ---------- */
@media only 屏幕和（最大宽度： 320px）{
/* 样式*/
}
/* iPad（纵向和横向）---------- */
@media only 屏幕和（最小设备宽度： 768px）和（最大设备宽度： 1024px）{
/* 样式*/
}
/* iPad（横向）---------- */
@media only 屏幕和（最小设备宽度： 768px）和（最大设备宽度： 1024px）和（方向： 横向）{
/* 样式*/
}
/* iPad（纵向）---------- */
@media only 屏幕和（最小设备宽度： 768px）和（最大设备宽度： 1024px）和（方向： 纵向）{
/* 样式*/
}
/* 台式机和笔记本电脑----------- */
@media only 屏幕和（最小宽度： 1224px）{
/* 样式*/
}
/* 大屏幕----------- */
@media only 屏幕和（最小宽度： 1824px）{
/* 样式*/
}
/* iPhone 4 ---------- */
@media 仅屏幕和（-webkit-min-device-pixel-ratio:1.5），仅屏幕和（min-device-pixel-ratio:1.5）{
/* 样式*/
}
18. 现代字体堆栈
/* 基于Times New Roman 的衬线*/
font-family: Cambria，"Hoefler Text"，Utopia，"Liberation Serif"，"Nimbus Roman No9 L Regular"，Times，"Times New Roman"，serif;
/* 现代的乔治亚衬线*/
font-family: Constantia、“Lucida Bright”、Lucidabright、“Lucida Serif”、Lucida、“DejaVu Serif”、“Bitstream Vera Serif”、“Liberation Serif”、Georgia、衬线；
/*更传统的基于Garamond 的衬线*/
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”，乔治亚州，衬线体；
/*基于Helvetica/Arial 的无衬线字体*/
字体家族： Frutiger、“Frutiger Linotype”、Univers、Calibri、“Gill Sans”、“Gill Sans MT”、“Myriad Pro”、Myriad、“DejaVu Sans Condensed”、“Liberation Sans”、“Nimbus Sans L”、Tahoma , 日内瓦， "Helvetica Neue", Helvetica, Arial, sans-serif;
/*基于Verdana 的无衬线字体*/
font-family: Corbel、“Lucida Grande”、“Lucida Sans Unicode”、“Lucida Sans”、“DejaVu Sans”、“Bitstream Vera Sans”、“Liberation Sans”、Verdana、“Verdana Ref”、sans-serif；
/*基于Trebuchet的无衬线字体*/
font-family: "Segoe UI"、Candara、"Bitstream Vera Sans"、"DejaVu Sans"、"Bitstream Vera Sans"、"Trebuchet MS"、Verdana、"Verdana Ref"、sans-serif;
/*较重的“Impact”无衬线*/
font-family: Impact、Haettenschweiler、“Franklin Gothic Bold”、Charcoal、“Helvetica Inserat”、“Bitstream Vera Sans Bold”、“Arial Black”、sans-serif；
/*等宽字体*/
font-family: Consolas、“Andale Mono WT”、“Andale Mono”、“Lucida Console”、“Lucida Sans Typewriter”、“DejaVu Sans Mono”、“Bitstream Vera Sans Mono”、“Liberation Mono”、“Nimbus Mono L” ，摩纳哥，“新信使”，信使，等宽；
19. 自定义文本选择
:选择{背景：#e2eae2; }
:-moz-选择{background: #e2eae2; }
:-webkit-选择{background:#e2eae2; }
20.隐藏H1徽标
h1 {
文本缩进： -9999px；
margin: 0 自动；
宽度： 320px；
高度： 85px；
background: 透明url("images/logo.png") 无重复滚动；
}
21.偏光图片边框
img.宝丽来{
背景：#000; /*将其更改为背景图片或删除*/
border:solid #fff;
边框宽度：6px 6px 20px 6px;
框阴影：1px 1px 5px #333; /* 5px 处的标准模糊。增加深度*/
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
高度：200px； /*设置为图像或所需div 的高度*/
宽度：200px； /*设置为图像或所需div 的宽度*/
}
22. 锚链接伪类
a:link { color: 蓝色； }
a:visited { color: 紫色； }
a:hover { color: 红色； }
a:active { color: 黄色； }
23. 奇怪的CSS 引用
.has-pullquote:before {
/* 重置指标。 */
填充： 0；
博德
er: none;
/* Content */
content: attr(data-pullquote);
/* Pull out to the right, modular scale based margins. */
float: right;
width: 320px;
margin: 12px -140px 24px 36px;
/* Baseline correction */
position: relative;
top: 5px;
/* Typography (30px line-height equals 25% incremental leading) */
font-size: 23px;
line-height: 30px;
}
.pullquote-adelle:before {
font-family: "adelle-1", "adelle-2";
font-weight: 100;
top: 10px !important;
}
.pullquote-helvetica:before {
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
top: 7px !important;
}
.pullquote-facit:before {
font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
font-weight: bold;
top: 7px !important;
}
24、CSS3：全屏背景
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;
}
25、内容垂直居中
.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}
26、强制出现垂直滚动条
html { height: 101% }
27、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);
}
28、@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;
}
29、缝合CSS3元素
p {
position:relative;
z-index:1;
padding: 10px;
margin: 10px;
font-size: 21px;
line-height: 1.3em;
color: #fff;
background: #ff0030;
-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
p:before {
content: "";
position: absolute;
z-index: -1;
top: 3px;
bottom: 3px;
left :3px;
right: 3px;
border: 2px dashed #fff;
}
p a {
color: #fff;
text-decoration:none;
}
p a:hover, p a:focus, p a:active {
text-decoration:underline;
}
30、CSS3 斑马线
tbody tr:nth-child(odd) {
background-color: #ccc;
}
31、有趣的&
.amp {
font-family: Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", serif;
font-style: italic;
font-weight: normal;
}
32、大字段落
p:first-letter{
display: block;
margin: 5px 0 0 5px;
float: left;
color: #ff3366;
font-size: 5.4em;
font-family: Georgia, Times New Roman, serif;
}
33、内部CSS3 盒阴影
#mydiv {
-moz-box-shadow: inset 2px 0 4px #000;
-webkit-box-shadow: inset 2px 0 4px #000;
box-shadow: inset 2px 0 4px #000;
}
34、外部CSS3 盒阴影
#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);
}
35、三角形列表项目符号
ul {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
li:before {
content: "";
border-color: transparent #111;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
36、固定宽度的居中布局
#page-wrap {
width: 800px;
margin: 0 auto;
}
37、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;
}
38、CSS固定页脚
#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");
}
39、IE6的PNG透明修复
.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));
}
40、跨浏览器设置最小高度
#container {
min-height: 550px;
height: auto !important;
height: 550px;
}
41、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);
}
42、基于文件类型的链接样式
/* 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;
}
43、强制换行
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+ */
}
44、在可点击的项目上强制手型
a[href], input[type="submit"], input[type="image"], label[for], select, button, .pointer {
cursor: pointer;
}
45、网页顶部盒阴影
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;
}
46、CSS3对话气泡
.chat-bubble {
background-color: #ededed;
border: 2px solid #666;
font-size: 35px;
line-height: 1.3em;
margin: 10px auto;
padding: 10px;
position: relative;
text-align: center;
width: 300px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
font-family: "Bangers", arial, serif;
}
.chat-bubble-arrow-border {
border-color: #666 transparent transparent transparent;
border-style: solid;
border-width: 20px;
height: 0;
width: 0;
position: absolute;
bottom: -42px;
left: 30px;
}
.chat-bubble-arrow {
border-color: #ededed transparent transparent transparent;
border-style: solid;
border-width: 20px;
height: 0;
width: 0;
position: absolute;
bottom: -39px;
left: 30px;
}
47、H1-H5默认样式
h1,h2,h3,h4,h5{
color: #005a9c;
}
h1{
font-size: 2.6em;
line-height: 2.45em;
}
h2{
font-size: 2.1em;
line-height: 1.9em;
}
h3{
font-size: 1.8em;
line-height: 1.65em;
}
h4{
font-size: 1.65em;
line-height: 1.4em;
}
h5{
font-size: 1.4em;
line-height: 1.25em;
}
48、纯CSS背景噪音
body {
background-image: url(data:image/png;base64,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);
background-color: #0094d0;
}
49、持久的列表排序
ol.chapters {
list-style: none;
margin-left: 0;
}
ol.chapters >li:before {
content: counter(chapter) ". ";
counter-increment: chapter;
font-weight: bold;
float: left;
width: 40px;
}
ol.chapters li {
clear: left;
}
ol.start {
counter-reset: chapter;
}
ol.continue {
counter-reset: chapter 11;
}
50、CSS悬浮提示文本
a {
border-bottom:1px solid #bbb;
color:#666;
display:inline-block;
position:relative;
text-decoration:none;
}
a:hover,
a:focus {
color:#36c;
}
a:active {
top:1px;
}
/* Tooltip styling */
a[data-tooltip]:after {
border-top: 8px solid #222;
border-top: 8px solid hsla(0,0%,0%,.85);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
display: none;
height: 0;
width: 0;
left: 25%;
position: absolute;
}
a[data-tooltip]:before {
background: #222;
background: hsla(0,0%,0%,.85);
color: #f6f6f6;
content: attr(data-tooltip);
display: none;
font-family: sans-serif;
font-size: 14px;
height: 32px;
left: 0;
line-height: 32px;
padding: 0 15px;
position: absolute;
text-shadow: 0 1px 1px hsla(0,0%,0%,1);
white-space: nowrap;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
a[data-tooltip]:hover:after {
display: block;
top: -9px;
}
a[data-tooltip]:hover:before {
display: block;
top: -41px;
}
a[data-tooltip]:active:after {
top: -10px;
}
a[data-tooltip]:active:before {
top: -42px;
}
51、深灰色的圆形按钮
.graybtn {
-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;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#d1d1d1");
background-color:#ffffff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
.graybtn:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#d1d1d1", endColorstr="#ffffff");
background-color:#d1d1d1;
}
.graybtn:active {
position:relative;
top:1px;
}
52、在可打印的网页中显示URLs
@media print {
a:after {
content: " [" attr(href) "] ";
}
}
53、禁用移动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;
}
54、CSS3 圆点图案
body {
background: radial-gradient(circle, white 10%, transparent 10%),
radial-gradient(circle, white 10%, black 10%) 50px 50px;
background-size: 100px 100px;
}
55、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;
}
56、Github的fork色带
.ribbon {
background-color: #a00;
overflow: hidden;
/* top left corner */
position: absolute;
left: -3em;
top: 2.5em;
/* 45 deg ccw rotation */
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
/* shadow */
-moz-box-shadow: 0 0 1em #888;
-webkit-box-shadow: 0 0 1em #888;
}
.ribbon a {
border: 1px solid #faa;
color: #fff;
display: block;
font: bold 81.25% "Helvetiva Neue", Helvetica, Arial, sans-serif;
margin: 0.05em 0 0.075em 0;
padding: 0.5em 3.5em;
text-align: center;
text-decoration: none;
/* shadow */
text-shadow: 0 0 0.5em #444;
}
57、CSS font属性缩写
p {
font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
}
58、论文页面的卷曲效果
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);
}
59、鲜艳的锚链接
a {
color: #00e;
}
a:visited {
color: #551a8b;
}
a:hover {
color: #06e;
}
a:focus {
outline: thin dotted;
}
a:hover, a:active {
outline: 0;
}
a, a:visited, a:active {
text-decoration: none;
color: #fff;
-webkit-transition: all .3s ease-in-out;
}
a:hover, .glow {
color: #ff0;
text-shadow: 0 0 10px #ff0;
}
60、带CSS3特色的横幅显示
.featureBanner {
position: relative;
margin: 20px
}
.featureBanner:before {
content: "Featured";
position: absolute;
top: 5px;
left: -8px;
padding-right: 10px;
color: #232323;
font-weight: bold;
height: 0px;
border: 15px solid #ffa200;
border-right-color: transparent;
line-height: 0px;
box-shadow: -0px 5px 5px -5px #000;
z-index: 1;
}
.featureBanner:after {
content: "";
position: absolute;
top: 35px;
left: -8px;
border: 4px solid #89540c;
border-left-color: transparent;
border-bottom-color: transparent;
}
END，本文到此结束，如果可以帮助到大家，还望关注本站哦！
【60个实用CSS代码片段汇总】相关文章：
1.动物故事精选：寓教于乐的儿童故事宝库
2.《寓教于乐：精选动物故事助力儿童成长》
3.探索动物旅行的奇幻冒险：专为儿童打造的童话故事
4.《趣味动物刷牙小故事》
5.探索坚韧之旅：小蜗牛的勇敢冒险
6.传统风味烤小猪，美食探索之旅
7.探索奇幻故事：大熊的精彩篇章
8.狮子与猫咪的奇妙邂逅：一场跨界的友谊故事
9.揭秘情感的力量：如何影响我们的生活与决策
10.跨越两岸：探索彼此的独特世界
用户评论
哇，60个啊！感觉可以学习好久好久！
有17位网友表示赞同！
终于不用自己折腾那么多了，这太棒了！
有17位网友表示赞同！
有没有附带解释，这样更容易理解吧？
有12位网友表示赞同！
想做网页设计的小伙伴们这个收藏必备！
有18位网友表示赞同！
css代码片段这种东西超级实用的啊！
有15位网友表示赞同！
分享这么珍贵的东西真的太牛了！感谢这位大好人！
有19位网友表示赞同！
学习一下这些代码，能提高我的网站制作效率吧？
有20位网友表示赞同！
我最近也正在学网页设计，这个正好可以用上！
有7位网友表示赞同！
这么多片段，应该能解决各种常见需求了吧？
有6位网友表示赞同！
直接套用就好吗？不用改动内容吗？
有20位网友表示赞同！
这个收集的代码都是比较基础的吗？
有12位网友表示赞同！
有没有一些高级的CSS代码片段？比如动画特效啊什么的！
有12位网友表示赞同！
实用性强，学习起来应该会更方便！
有11位网友表示赞同！
期待能让我更快地做出漂亮的网页！
有15位网友表示赞同！
收藏 dulu, 等有时间再慢慢看！
有20位网友表示赞同！
这60个代码片段涵盖哪些领域呢？
有8位网友表示赞同！
学习的同时也需要理解代码的含义吧？
有14位网友表示赞同！
这个资源太棒了，可以分享给我的同学吗？
有7位网友表示赞同！
不知道这些代码兼容性如何？
有10位网友表示赞同！
有没有相应的教程视频讲解这些代码的用法？
有9位网友表示赞同！