在一行中就可以完成的7个CSS代码技巧！

英文 | https://javascript.plainenglish.io/7-tricks-to-write-css-code-in-one-line-64a4c9ffe57d

翻译 | 小爱

学习使用编写更少的CSS代码，从而可以帮助你提升工作效率，实现更快地加载网站页面。

同样的功能，最后结果都是一样的，一行就可以实现的，千万不要写多行，有人可能会说，一行书写不易读，但请想一下！如果一行就可以完成的效果，而你必须将所有内容都写成多行，那会使 CSS 文件太长且更难以阅读，不是吗？

准备好了吗？，让我们开始吧！

以下是多个网页中最常用的 CSS 代码，可以快速减少到 一 行，其效果也一样。

1、Background（背景）

background: #000 url(images/image.png) no-repeat left top;
//vs
background-color: #000;
background-image: url(images/image.png)
background-repeat: no-repeat;
background-position: left top;

2、Animation(动画)

anmation: crazy 4s ease-in-out 0.5s 12 backwards;
//vs
animation-name: crazy;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-deplay: 0.5s;
animation-iteration-count: 12;
animation-dirrection: backwards;

3、Font（字体）

font: itlaic bold 15px/1.2 Arial, sans-serif;
//vs
font-style: italic;
font-weight: bold;
font-size: 15px;
line-height: 1.2;
font-family: Arial, sans-serif;

4、Margin（边距）

margin: 10px 5px 10px 5px;
//vs
margin-top:10px;
mrgin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

5、List（列表）

list-style: dic outside url('img/shape.png')
// vs
list-style-type: disc;
list-style-position: outside;
list_style-image: url('img/shape.png')

6、 Padding（填充）

padding: 1em 3px 30px 5px;
//Vs
padding-top: 1em;
padding-right: 3px;
padding-bottom: 30px;
padding-left: 5px;

7、Border（边框）

border: 1px solide #000
//vs
border-width: 1px;
border-style: solid;
border-color: #000

这7个小实例，是不是很方便，大大减少了CSS代码，提升了工作效率，是不是很方便？如果你还知道其他简写技巧的话，请记得与我们一起来分享！

今天的内容，请先将其保存起来以备将来使用。

感谢你的阅读。

学习更多技能

请点击下方公众号

​