CSS代码片段

清除浮动

.clearfix:before, container:after { content: "", display: table; }
.clearfix:after { clear: both; }
/*IE 6/7*/
.clearfix { zoom: 1; }

跨浏览器透明度

.transparent {
  filter: alpha(opacity=50); /* IE */
  -khtml-opacity: 0.5;  /* 老版本的Safari */
  -moz-opacity: 0.5;  /* Mozilla, Netscape */
  opacity: 0.5;  /* fx, Safari, Opera */
}

设置圆角

#conatiner {
  -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;
}

媒介查询

/* 智能设备(横屏和竖屏) */
@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) {}

/* iPad(横屏和竖屏) */
@media only screen 
and (min-device-width: 768px) and (max-device-width: 1024px) { }

/* iPad(竖屏) */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) { }

/* iPad(横屏) */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024) 
and (orientation: portrait) { }

/* 台式机和笔记本 */
@media only screen and (min-width: 1224px) { }

/* 超大屏 */
@media only screen and (min-width:1824px) { }

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

字体

body {
  font: font-style font-variant font-weight font-size line-height font-family;
}
@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.tff') format('truetype'),  /* Safari Browsers */
        url('webfont.svg#svgFontName') format('svg'); /* Legacy IOS */
}
body {
  font-family: 'MyWebFont', Arial, sans-serif;
}

文本选择高亮

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

锚链接伪类

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

全屏背景

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

强制垂直滚动条

html { height: 101%; }

自定义段落首字母

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

阴影

#mydiv {
  -moz-box-shadow: inset 2px 0 4px #000;
  -webkit-box-shadow: inset 2px 0 4px #000;
  box-shadow: inset 2px 0 4px #000;
}
#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);
}

禁用移动端高亮显示

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

斑马条纹

tbody tr:nth-child(odd) {
  background-color: #ccc;
}

滚动条颜色

body {
  scrollbar-face-color: #666666;
  scrollbar-shadow-color: #ffffff;
  scrollbar-highlight-color: #ffffff;
  scrollbar-3dlight-color: #3366cc;
  scrollbar-darkshadow-color: #666666;
  scrollbar-track-color: #eeeeee;
  scrollbar-arrow-color: #666666;
}

文本动画

ul {
  animation: 6s linear 0 normal none infinite change;
  -webkit-animation: 6s linear 0 normal none infinite change;
  -moz-animation: 6s linear 0 normal none infinite change;
  -o-animation: 6s linear 0 normal none infinite change;
}
@-webkit-keyframes change {
  0% { margin-top: 0; }
  15% { margin-top: 0; }
  25% { margin-top: -40px; }
  40% { margin-top: -40px; }
  50% { margin-top: -80px; }
  65% { margin-top: -80px; }
  75% { margin-top: -40px; }
  85% { margin-top: -40px; }
  100% { margin-top: 0; }
}
@keyframes change {
  0% { margin-top: 0; }
  15% { margin-top: 0; }
  25% { margin-top: -40px; }
  40% { margin-top: -40px; }
  50% { margin-top: -80px; }
  65% { margin-top: -80px; }
  75% { margin-top: -40px; }
  85% { margin-top: -40px; }
  100% { margin-top: 0; }
}

文本

text-shadow: 5px 5px 5px #6600ff;
.container {
  text-align: center;
}
div {
  width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}

居中

.container {
  height: 35px;
  line-height: 35px;
}
.container {
  min-height: 6.5em;
  display: table-cell;
  vertical-align: middle;
}
<div id="big">
  <div id="small"></div>
</div>

#big {
  position: relative;
  height: 480px;
}
#small {
  position: absolute;
  top: 50%;
  height: 240px;
  margin-top: -120px;
}
#page-wrap {
  width: 800px;
  margin: 0 auto;
}

图片宽度自适应

img {
  max-width: 100%;
}
_img {
  width: 100%;
}

简单3D按钮

#button {
  background: #888;
  border: 1px solid;
  border-color: #999 #777 #777 #999;
}

美化列表标志

ul li {
  background-image: url('path-to-your-image');
  background-repeat: none;
  background-position: 0 0.5em;
}

三角形

.triangle {
  border-color: transparent transparent green transparent;
  border-style: solid;
  border-width: 0px 300px 300px 300px;
  height: 0px;
  width: 0px;
}

禁止自动换行

h1 {
  white-space: nowrap;
}

替换H1

h1 {
  text-indent: -9999px;
  background: url('h1-image.jpg') no-repeat;
  width: 200px;
  height: 50px;
}

文章标签:css

永久链接:http://www.shuaihua.cc/article/css-useful-code-fragments

快速跳转:陈帅华 - 心头好文 - css - CSS代码片段

css-useful-code-fragments

发表日期:2018-7-31

版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证