https://www.sdvcrx.com/tags/css/Recent content in Css on sdvcrx - A tech blogHugozhMon, 20 Aug 2018 21:16:49 +0800https://www.sdvcrx.com/post/2018-08-20-elementui-bem/Mon, 20 Aug 2018 21:16:49 +0800https://www.sdvcrx.com/post/2018-08-20-elementui-bem/<p>最近在阅读 <a href="http://element.eleme.io/#/zh-CN">ElementUI</a> 源码的时候查看样式，发现其中使用了 <code>SCSS Mixins</code> 非常巧妙的实现了 <a href="http://getbem.com/">CSS BEM</a> 命名规范，也借此机会了解一下SCSS的高级用法，在此记录分享一下。</p>https://www.sdvcrx.com/post/2015-02-12-css3-new-feature/Thu, 12 Feb 2015 13:47:23 +0800https://www.sdvcrx.com/post/2015-02-12-css3-new-feature/<h2 id="flexbox">Flexbox</h2> <p><a href="http://bocoup.com/weblog/dive-into-flexbox/">dive into flexbox</a></p> <h2 id="background">background</h2> <p>注意事项：</p> <ol> <li>加载图片失败时UA会使用<code>background-color</code>，所以在设置<code>background-image</code>时一定要同时设置<code>background-color</code>作为fallback</li> <li>设置前景色<code>color</code>时，要同时设置<code>background-color</code>，反之亦然</li> <li>使用<code>rgba</code>的时候也要设置fallback color</li> </ol> <h3 id="linear-gradient">linear-gradient</h3> <p><a href="http://css.doyoe.com/values/image/linear-gradient%28%29.htm">渐变背景</a></p>https://www.sdvcrx.com/post/2014-11-08-css-notes/Sat, 08 Nov 2014 09:33:18 +0800https://www.sdvcrx.com/post/2014-11-08-css-notes/<h2 id="选择器">选择器</h2> <h3 id="上下文选择器">上下文选择器</h3> <ol> <li> <p>包含选择符</p> <pre><code> tag1 tag2 {} // 匹配祖先和后代 </code></pre> </li> <li> <p>子选择符<code>&gt;</code></p> <pre><code> tag1 &gt; tag2 {} // 匹配父元素与子元素 </code></pre> </li> <li> <p>紧邻同胞选择符<code>+</code></p> <pre><code> tag1 + tag2 {} // tag2必须紧跟在tag1后 </code></pre> </li> <li> <p>一般同胞选择符<code>~</code></p>