那个网页的本来目的是教 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,了解和背下了许多属性,然而还是有很多属性可能不算常用,但一旦用得好效果就很不错……可这些零零碎碎的属性能怎么办呢?就像背单词一样把它们也都背下来吗?
谢谢!~
1
lwbjing 2017-08-16 13:53:32 +08:00
多练... 找不同的结构、效果练...
不用硬背,先熟悉一遍,把一些属性都了解一下, 当你开始写的时候,比如你要圆角,你该用什么,你要其它的效果该怎么样。。 |
2
hardensky 2017-08-16 13:54:11 +08:00
前端东西本来就很杂很多 记不清楚具体属性名或者用法也没关系,知道有这回事就行了 需要的时候能通过搜索引擎拾起来就行了
不过楼主发的这个还算常用了,多看看 MDN 吧 |
3
jy02534655 2017-08-16 15:33:00 +08:00
这样的写就是为了处理兼容问题呀,不用记那么多,记住其中没前缀的那个用法就行了。你看他们的值都是一样的,你要是会用 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/想要什么效果直接用他提供的生成器生成一个就行了,不用考虑那么多... |
4
sivacohan 2017-08-16 15:53:08 +08:00 via Android
你这都是带前缀的。
你那个总共有四种前缀。 第一次写的时候先写一种前缀的。写好了再去看兼容性。逐个加上去。 以后写多了,这种固定的就直接复制粘贴再简单修改一下。 等写的更多了,就有 less,sass 等预编译机制了。 |
5
ipwx 2017-08-16 16:12:13 +08:00
推荐你用一些现代的打包工具。比如 webpack + postcss-loader + autoprefixer 可以自动加上必要的前缀。你只要写 box-shadow 就行了。
|
7
lneoi 2017-08-16 16:19:27 +08:00
去掉前缀实际上就两句。前端这东西跟写字一样,多用。没用就忘记了。一句一个效果,脑子里记住几个常用的组合,就能出来一些常用的效果了
|
8
Newyorkcity OP |