请教前端的前辈们， HTML/CSS 如何进一步修炼呢？看书上给的代码（这本书主要讲的是 JS CSS/HTML 都是提供好的）觉得它生成的网页很不错，但一看 CSS 代码就觉得“哇，这怎么写出来的。。”

[Newyorkcity]

那个网页的本来目的是教 JS 本地存储的 API 用的 能够在网页上贴便签，关掉来下次还能看见
那个便签蛮好看的（颜色啊大小啊），角度略略有一点倾斜，然后鼠标悬停上去旋转角度会变化，并且会放大一些，挺动态。
然后我去看 CSS 代码。。

	-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
	-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
	-webkit-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in;

出现了很多这种内容，我也去网上查了一下自己设置一下看看。。
然而我发现这个单个设置起来效果不是很明显，怎么说呢，感觉很难像其他 CSS 属性一样多用几次明白效果，记住了，以后就会用了，很玄学。。不知道这些内容自己该怎么去精通。
emmm 还有一个问题就是发现自己虽然初步入门了 HTML/CSS，了解和背下了许多属性，然而还是有很多属性可能不算常用，但一旦用得好效果就很不错……可这些零零碎碎的属性能怎么办呢？就像背单词一样把它们也都背下来吗？
谢谢！~

[lwbjing]

多练... 找不同的结构、效果练...
不用硬背，先熟悉一遍，把一些属性都了解一下，
当你开始写的时候，比如你要圆角，你该用什么，你要其它的效果该怎么样。。

[hardensky]

前端东西本来就很杂很多 记不清楚具体属性名或者用法也没关系，知道有这回事就行了 需要的时候能通过搜索引擎拾起来就行了

不过楼主发的这个还算常用了，多看看 MDN 吧

[jy02534655]

这样的写就是为了处理兼容问题呀，不用记那么多，记住其中没前缀的那个用法就行了。你看他们的值都是一样的，你要是会用 sass 或者 less 可以写一个宏来处理这个的，比如说

@mixin box-shadow($h-shadow,$v-shadow,$blur,$spread,$shadow-color) {
$value: $h-shadow $v-shadow $blur $spread $shadow-color;
-webkit-box-shadow: $value;
-moz-box-shadow: $value;
-ms-box-shadow: $value;
box-shadow: $value;
}

然后
@include box-shadow(0, 1px, 8px, 0,#f2f2f2);
这样调用就不麻烦

还有现在很多效果网上都有生成器，比如 http://code.ciaoca.com/想要什么效果直接用他提供的生成器生成一个就行了，不用考虑那么多...

[sivacohan]

你这都是带前缀的。
你那个总共有四种前缀。
第一次写的时候先写一种前缀的。写好了再去看兼容性。逐个加上去。
以后写多了，这种固定的就直接复制粘贴再简单修改一下。
等写的更多了，就有 less，sass 等预编译机制了。

[ipwx]

推荐你用一些现代的打包工具。比如 webpack + postcss-loader + autoprefixer 可以自动加上必要的前缀。你只要写 box-shadow 就行了。

[Corbusier]

@ipwx 才开始学布局和样式怎么会用打包工具啊，哈哈。直接写，只用 chrome 测就行

[lneoi]

去掉前缀实际上就两句。前端这东西跟写字一样，多用。没用就忘记了。一句一个效果，脑子里记住几个常用的组合，就能出来一些常用的效果了

[Newyorkcity]

@lwbjing
@hardensky
@jy02534655
@sivacohan
@ipwx
@Corbusier
@lneoi
谢谢几位的建议！~