70多个非常实用的CSS小技巧

在工作中，为了提升工作效率与持续学习，常常会收集整理很多素材，有网站案例源码，有片段的代码特效，有喜欢UI作品，有LOGO设计案例，总之，只要是自己喜欢的内容，我都会收集，每过一段时间，就会集中时间进行整理。以下就是我收集的一些CSS小技巧，希望能帮助到你，如果你感觉有用，也请你收藏与分享给你的小伙伴们。

1. 文字水平居中

将一段文字置于容器的水平中点，只要设置text-align属性即可：

text-align:center;

2. 容器水平居中

先该容器设置一个明确宽度，然后将margin的水平值设为auto即可。

div#container {

width:760px;

margin:0 auto;

}

3. 文字垂直居中

单行文字的垂直居中，只要将行高与容器高设为相等即可。

比如，容器中有一行数字。

然后CSS这样写：

div#container

如果有n行文字，那么将行高设为容器高度的n分之一即可。

4. 容器垂直居中

比如，有一大一小两个容器，请问如何将小容器垂直居中？

首先，将大容器的定位为relative。

div#big{

position:relative;

height:480px;

}

然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。

div#small {

position: absolute;

top: 50%;

height: 240px;

margin-top: -120px;

}

5. 图片宽度自适应

如何使得较大的图片，能够自动适应小容器的宽度？CSS可以这样写：

img

6. 3D按钮

要使按钮具有3D效果，只要将它的左上部边框设为浅色，右下部边框设为深色即可。

div#button {

background: #888;

border: 1px solid;

border-color: #999 #777 #777 #999;

}

7. font属性快捷写法

font快捷写法的格式为：

body {

font: font-style font-variant font-weight font-size line-height font-family;

}

所以，

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 13px;

font-weight: normal;

font-variant: small-caps;

font-style: italic;

line-height: 150%;

}

可以被写成：

body {

font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;

}

8. link状态设置顺序

link的四种状态，需要按照下面的前后顺序进行设置：

a:link

a:visited

a:hover

a:active

9. CSS优先性

如果同一个容器被多条CSS语句定义，那么哪一个定义优先呢？

基本规则是：

行内样式 > id样式 > class样式 > 标签名样式

比如，有一个元素：

行内样式是最优先的，然后其他设置的优先性，从低到高依次为：

div

10. font-size基准

浏览器的缺省字体大小是16px，你可以先将基准字体大小设为10px：

body

后面统一采用em作为字体单位，2.4em就表示24px。

h1

11. Text-transform和Font Variant

Text-transform用于将所有字母变成小写字母、大写字母或首字母大写：

p

p

p

Font Variant用于将字体变成小型的大写字母（即与小写字母等高的大写字母）。

p

12. CSS重置

CSS重置用于取消浏览器的内置样式，请参考YUI和Eric Meyer的样式表。

13. 用图片充当列表标志

默认情况下，浏览器使用一个黑圆圈作为列表标志，可以用图片取代它：

ul

ul li {

background-image: url("path-to-your-image");

background-repeat: none;

background-position: 0 0.5em;

}

14. 透明

将一个容器设为透明，可以使用下面的代码：

.element {

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

在这四行CSS语句中，第一行是IE专用的，第二行用于Firefox，第三行用于webkit核心的浏览器，第四行用于Opera。

15. CSS三角形

如何使用CSS生成一个三角形？

先编写一个空元素

然后，将它四个边框中的三个边框设为透明，剩下一个设为可见，就可以生成三角形效果：

.triangle {

border-color: transparent transparent green transparent;

border-style: solid;

border-width: 0px 300px 300px 300px;

height: 0px;

width: 0px;

}

16. 禁止自动换行

如果你希望文字在一行中显示完成，不要自动换行，CSS命令如下：

h1 { white-space:nowrap; }

17. 用图片替换文字

有时我们需要在标题栏中使用图片，但是又必须保证搜索引擎能够读到标题，CSS语句可以这样写：

h1 {

text-indent:-9999px;

background:url("h1-image.jpg") no-repeat;

width:200px;

height:50px;

}

18. 获得焦点的表单元素

当一个表单元素获得焦点时，可以将其突出显示：

input:focus { border: 2px solid green; }

19. !important规则

多条CSS语句互相冲突时，具有!important的语句将覆盖其他语句。由于IE不支持!important，所以也可以利用它区分不同的浏览器。

h1 {

color: red !important;

color: blue;

}

上面这段语句的结果是，其他浏览器都显示红色标题，只有IE显示蓝色标题。

20. CSS提示框

当鼠标移动到链接上方，会自动出现一个提示框。

链接文字 提示文字

CSS这样写：

a.tooltip

a.tooltip span

a:hover /*background-color is a must for IE6*/

a.tooltip:hover span

21. 各类浏览器的专用语句

/* IE6 and below */

* html #uno { color: red }

/* IE7 */

*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera */

html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */

html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */

html:first-child #cinco { color: red }

/* Safari 2-3 */

html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */

body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */

body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */

@media screen and (-webkit-min-device-pixel-ratio:0) {

#diez { color: red }

}

/* iPhone / mobile webkit */

@media screen and (max-device-width: 480px) {

#veintiseis { color: red }

}

/* Safari 2 - 3.1 */

html[xmlns*=""]:root #trece { color: red }

/* Safari 2 - 3.1, Opera 9.25 */

*|html[xmlns*=""] #catorce { color: red }

/* Everything but IE6-8 */

:root *> #quince { color: red }

/* IE7 */

*+html #dieciocho { color: red }

/* Firefox only. 1+ */

#veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */

#veinticinco, x:-moz-any-link, x:default { color: red }

/***** Attribute Hacks ******/

/* IE6 */

#once { _color: blue }

/* IE6, IE7 */

#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */

#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */

#diecinueve { color: blue\9; }

/* IE7, IE8 */

#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */

#veintesiete { color: blue !ie; } /* string after ! can be anything */

22. 容器的水平和垂直居中

HTML代码如下：

CSS代码如下：

.logo {

display: block;

text-align: center;

display: block;

text-align: center;

vertical-align: middle;

border: 4px solid #dddddd;

padding: 4px;

height: 74px;

width: 74px; }

.logo * {

display: inline-block;

height: 100%;

vertical-align: middle; }

.logo .photo {

height: auto;

width: auto;

max-width: 100%;

max-height: 100%; }

23. CSS阴影

外阴影：

.shadow {

-moz-box-shadow: 5px 5px 5px #ccc;

-webkit-box-shadow: 5px 5px 5px #ccc;

box-shadow: 5px 5px 5px #ccc;

}

内阴影：

.shadow {

-moz-box-shadow:inset 0 0 10px #000000;

-webkit-box-shadow:inset 0 0 10px #000000;

box-shadow:inset 0 0 10px #000000;

}

24. 取消IE文本框的滚动条

textarea { overflow: auto; }

25. 黑白图像

这段代码会让你的彩色照片显示为黑白照片，是不是很酷？

img.desaturate {

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

}

26. 使用 :not() 在菜单上应用/取消应用边框

先给每一个菜单项添加边框

/* add border */

.nav li {

border-right: 1px solid #666;

}

然后再除去最后一个元素

// remove border /.nav li:last-child { border-right: none;}

可以直接使用 :not() 伪类来应用元素：

.nav li:not(:last-child) {

border-right: 1px solid #666;

}

这样代码就干净，易读，易于理解了。

当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：

.nav li:first-child ~ li {

border-left: 1px solid #666;

}

27. 页面顶部阴影

下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果：

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

28. 给 body 添加行高

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可,这样文本元素就可以很容易地从 body 继承。

body { line-height: 1;}

29. 所有一切都垂直居中

要将所有元素垂直居中，太简单了：注意：在IE11中要小心flexbox。

html, body {

height: 100%;

margin: 0;}

body { -webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-flex;

display: flex;}

30. 逗号分隔的列表

让HTML列表项看上去像一个真正的，用逗号分隔的列表,对最后一个列表项使用 :not() 伪类。

ul > li:not(:last-child)::after { content: ",";}

31. 使用负的 nth-child 选择项目

在CSS中使用负的 nth-child 选择项目1到项目n。

li { display: none;}

/* select items 1 through 3 and display them */

li:nth-child(-n+3) { display: block;}

32. 对图标使用 SVG

我们没有理由不对图标使用SVG，SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。

.logo { background: url("logo.svg");}

33. 优化显示文本

有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：

html {

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;

}

注：请负责任地使用 optimizeLegibility。此外，IE /Edge没有 text-rendering 支持。

34. 对纯 CSS 滑块使用 max-height

使用 max-height 和溢出隐藏来实现只有CSS的滑块：

.slider ul {

max-height: 0;

overlow: hidden;

}

.slider:hover ul {

max-height: 1000px;

transition: .3s ease;

}

35. 继承 box-sizing

让 box-sizing 继承 html：

html {

box-sizing: border-box;

}

*, *:before, *:after {

box-sizing: inherit;

}

这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。

36. 表格单元格等宽

表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：

.calendar { table-layout: fixed;}

37. 用 Flexbox 摆脱外边距的各种 hack

当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：

.list { display: flex;

justify-content: space-between;}

.list .person { flex-basis: 23%;}

现在，列表分隔符就会在均匀间隔的位置出现。

38. 使用属性选择器用于空链接

当a元素没有文本值，但 href 属性有链接的时候显示链接：

a[href^="http"]:empty::before {

content: attr(href);}

相当方便。

39. 检测鼠标双击

HTML：

CSS：

.test3 span { position: relative;}

.test3 span a { position: relative; z-index: 2;}

.test3 span a:hover, .test3 span a:active { z-index: 4;}

.test3 span input { background: transparent; border: 0;

cursor: pointer; position: absolute;

top: -1px; left: 0;

width: 101%;

/* Hacky */

height: 301%;

/* Hacky */

z-index: 3;}

.test3 span input:focus { background: transparent;

border: 0; z-index: 1;}

40. CSS 写出三角形

/* create an arrow that points up */

div.arrow-up { width:0px; height:0px;

border-left:5px solid transparent;

/* left arrow slant */

border-right:5px solid transparent;

/* right arrow slant */

border-bottom:5px solid #2f2f2f;

/* bottom, add background color here */

font-size:0px; line-height:0px;}

/* create an arrow that points down */

div.arrow-down { width:0px; height:0px;

border-left:5px solid transparent;

border-right:5px solid transparent;

border-top:5px solid #2f2f2f;

font-size:0px; line-height:0px;

}

/* create an arrow that points left */

div.arrow-left { width:0px; height:0px;

border-bottom:5px solid transparent;

/* left arrow slant */

border-top:5px solid transparent;

/* right arrow slant */

border-right:5px solid #2f2f2f;

/* bottom, add background color here */

font-size:0px; line-height:0px;}

/* create an arrow that points right */

div.arrow-right {

width:0px; height:0px; border-bottom:5px solid transparent;

/* left arrow slant */

border-top:5px solid transparent;

/*right arrow slant */

border-left:5px solid #2f2f2f;

/* bottom, add background color here */

font-size:0px; line-height:0px;}

41. CSS3 calc() 的使用

calc() 用法类似于函数，能够给元素设置动态的值：

/* basic calc */

.simpleBlock {

width: calc(100% - 100px);}

/* calc in calc */

.complexBlock {

width: calc(100% - 50% / 3);

padding: 5px calc(3% - 2px);

margin-left: calc(10% + 10px);}

42. 文本渐变

文本渐变效果很流行，使用 CSS3 能够很简单就实现：

h2[data-text] {

position: relative;}

h2[data-text]::after {

content: attr(data-text);

z-index: 10;

color: #e3e3e3;

position: absolute;

top: 0;

left: 0;

-webkit-mask-image:

-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)),

color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

43. 禁用鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

.disabled { pointer-events: none; }

44. 模糊文本

简单但很漂亮的文本模糊效果，简单又好看！

.blur {

color: transparent;

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

45.简单的方法调整图片大小

.content img {

height:auto;

width:500px;

}

46.CSS阴影

.shadow {

-moz-box-shadow: 3px 3px 5px 6px #ccc;

-webkit-box-shadow: 3px 3px 5px 6px #ccc;

box-shadow: 3px 3px 5px 6px #ccc;

}

47.CSS首字放大

p:first-letter {

display: block;

float: left;

margin: 5px 5px 0 0;

color: red;

font-size: 1.4em;

background: #ddd;

font-family: Helvetica;

}

48.用CSS翻转图像

#content img {

-moz-transform: scaleX(-1);

-o-transform: scaleX(-1);

-webkit-transform: scaleX(-1);

transform: scaleX(-1);

filter: FlipH;

-ms-filter: "FlipH";

}

49.移除被点链接的点框

a

或者

a

50.元素透明

.element {

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

51.使用CSS显示链接之后的URL

a:after

这会在链接锚点后显示URL。你也可以用字体或其他样式定义它。

52.为手持设备定制特殊样式

53.用图片充当列表标志

ul

ul li {

background-image: url("path-to-your-image");

background-repeat: none;

background-position: 0 0.5em;

}

54.禁止自动换行

h1 { white-space:nowrap; }

55.获得焦点的表单元素

input:focus { border: 2px solid green; }

56.user-select 禁止用户选中文本

div {

user-select: none; /* Standard syntax */

}

57.清除手机tap事件后element 时候出现的一个高亮

* {

-webkit-tap-highlight-color: rgba(0,0,0,0);

}

58.增强用户体验，使用伪元素实现增大点击热区

.btn::befoer{

content:"";

position:absolute;

top:-10px;

right:-10px;

bottom:-10px;

left:-10px;

}

59.伪元素实现换行，替代换行标签

inline-element ::after{

content:"A";

white-space: pre;

}

60.will-change提高页面滚动、动画等渲染性能

/* 关键字值 */

will-change: auto;

will-change: scroll-position;

will-change: contents;

will-change: transform;

/* 示例 */

will-change: opacity;

/* 示例 */

will-change: left, top;

/* 两个示例 */

will-change的使用也要谨慎，

遵循最小化影响原则，

不要这样直接写在默认状态中，

因为will-change会一直挂着：

.will-change {

will-change: transform;

transition: transform 0.3s;

}

.will-change:hover {

transform: scale(1.5);

}

可以让父元素hover的时候，

声明will-change，

这样，移出的时候就会自动remove，

触发的范围基本上是有效元素范围。

.will-change-parent:hover .will-change {

will-change: transform;

}

.will-change {

transition: transform 0.3s;

}

.will-change:hover {

transform: scale(1.5);

}

61.box-sizing 让元素的宽度、高度包含border和padding

{

box-sizing: border-box;

}

62.calc() function, 计算属性值

div {

width: calc(100% - 100px);

}

例子就是让宽度为100%减去100px的值

63.css实现不换行、自动换行、强制换行

//不换行

white-space:nowrap;

//自动换行

word-wrap: break-word;

word-break: normal;

//强制换行

word-break:break-all;

64.perspective 透视

这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。

.div-box {

perspective: 400px;

}

65.设置图像透明度的两种方式

opcity:0.6；

background:rgba(0,0,0,.6)；

66.position定位属性

position属性指定一个元素(静态的、相对的、绝对或固定)的定位方法的类型。

position的属性值：

absolute：生成绝对定位的元素；

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位；

relative：生成相对定位的元素，相对于其正常位置经行定位。

z-index：指定一个元素的堆叠顺序。

67.cursor属性

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

CSS提供的cursor值：

pointer ：小手指；

help：箭头加问号；

wait：转圈圈；

move：移动光标；

crosshair：十字光标。

通过pointer属性我们可以伪造超链接：

pointer

68.隐藏没有静音、自动播放的影片

video[autoplay]:not([muted]) {

display: none;

}

69.Font-Size 基准

/* 假设浏览器的默认的大小是 16px ， 首先将其设置为10px (font-size:10/16) */

body

/* 然后就可以用em做统一字体单位了 2.4em = 24px */

h1

70.透明容器

.element {

filter:alpha(opacity=50); /* for ie */

-moz-opacity:0.5; /* for ff */

-khtml-opacity: 0.5; /* for webkit as chrome */

opacity: 0.5; /* for opera */

}

71、平行四边导航条代码

使用css3 的 2D变形中的 skew() 倾斜属性，让伪元素倾斜而不是li倾斜，是为了让li的文本正常显示。

.keith li {

list-style: none;

position: relative;

display: inline-block;

padding: 10px 15px;

color: #fff;

cursor: pointer;

}

.keith li::after {

content: '';

position: absolute;

left: 0;

right: 0;

bottom: 0;

top: 0;

border-radius: 5px;

z-index: -1;

background: #2175BC;

transform: skewX(-25deg);

}

.keith li:hover::after {

background: #39a3f5;

}

首页

笔记

问问

学习

设置

72、梯形导航条

使用css3 3D 变形中的 perspective()、rotateX()、transform-origin。

perspective(): 用于设置用户和元素3D空间Z平面之间的距离，值越小，用户与3D空间Z平面距离越近，视觉效果会明显；反之，值越大，用户与3D空间Z平面距离越远，视觉效果越小。

rotateX(): 3D空间上X轴的旋转

tansform-origin: 指定元素的旋转中心点位置，可以控制梯形倾斜。值为bottom，不倾斜；值为left，左倾斜；值为right，右倾斜。

.keith li {

list-style: none;

position: relative;

display: inline-block;

padding: 20px 15px 5px 15px;

margin-left: -10px;

color: #fff;

cursor: pointer;

}

.keith li::after {

content: '';

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

z-index: -1;

background: #2175BC;

border: 1px solid #fff;

border-top-right-radius: 8px;

border-top-left-radius: 8px;

transform: perspective(0.5em) rotateX(5deg);

transform-origin: bottom;

}

.keith li:hover::after {

background: #39a3f5;

}

首页

笔记

问问

学习

设置

本文完~