Vanessa

2019-08-05 描述创建一个背景色交替的条纹列表，这对于区分使用行来展示内容的兄弟节点很有用。HTML<ul><li>Item01</li><li>Item02</li><li>Item03</li><li>Item04</li><li>Item05</li></ul>CSSli:nth-child(odd){background-color:#eee;}DemoSeethePen<ahref=

2019-08-04 描述使用纯 CSS 创建一个三角形。HTML<divclass="triangle"></div>CSS.triangle{width:0;height:0;border-top:20pxsolid#333;border-left:20pxsolidtransparent;border-right:20pxsolidtransparent;}DemoSeethePen<ahref='

2019-08-03 描述使用操作系统自带的原生字体，让其有更接近原生应用的感觉。HTML<pclass="system-font-stack">Thistextusesthesystemfont.</p>CSS.system-font-stack{font-family:-apple-system,BlinkMacSystemFont,'SegoeUI',Roboto,Oxygen-Sans,Ubu

2019-08-02 描述使用一个 SVG 图形来对两个不同的块进行分割，创建一个比标准水平分割线更为有趣的视觉展现来进行分割。HTML<divclass="shape-separator"></div>CSS.shape-separator{position:relative;height:48px;background:#333;}.shape-separator::after{content:'';

2019-08-01 描述重置所有的样式的属性为默认值。这将不会影响 direction 和 unicode-bidi 属性。HTML<divclass="reset-all-styles"><h5>Title</h5><p>Loremipsumdolorsitametconsecteturadipisicingelit.Iureidexercitationemnullaquirepellatlaborumv

2019-07-31 描述一种较好的可选方案为 text-decoration:underline 或 <u></u>，但是下行字母不能被下划线所裁剪。但可以使用 text-decoration-skip-ink:auto 来进行解决，然而只有少数字母不会超过下划线。HTML<pclass="pretty-text-underline">Prettytextunderlinewithoutclippingdes