CSS

2020-02-06阅读(1220)赞(6)

1. 文字描边效果 <p class="outline">Why didn't I know about this sooner?</p> <style> .outline { color: white;...

2020-02-05阅读(1680)赞(7)

1. 响应式多列布局 https://codepen.io/kevinpowell/pen/zYxogZy .content { columns: 200px; } 2. 使用 box-shadow 实现多边框叠加效果 https://co...

2020-02-04阅读(1472)赞(5)

1. 基于媒体查询和 Grid 布局 https://codepen.io/kevinpowell/pen/ExaNWyM <div class="card"> <img src="https://i.pravatar.c...

2020-02-03阅读(1915)赞(6)

程序员 Kevin Powell 每天在 Twitter 的 #CSSTipOfTheDay 话题下，发布一篇 CSS 技巧，这里做整理收藏。 1. 渐变色文字 https://codepen.io/kevinpowell/pen/MWYY...

2019-07-31阅读(1334)赞(4)

一、简介 网格布局（Grid）是很强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手...

2019-07-21阅读(2522)赞(7)

概要 BEM 分别代表着：Block（块）、Element（元素）、Modifier（修饰符），是一种组件化的 CSS 命名方法和规范，由俄罗斯 Yandex 团队所提出。其目的是将用户界面划分成独立的（模）块，使开发更为简单和快速，利于团...

2018-11-28阅读(1713)赞(3)

1 引言 虽然现在 Css Module 与 Css-in-js 更流行，但使用它们会导致过分依赖 滥用 class 做唯一定位，违背了 Css 选择器的初衷。 本期精读的文章是：attribute-selectors-splicing-h...

2018-10-15阅读(2466)赞(9)

一、前言 好久没有更新文章了，因为最近996，emmm….. 在css中，层叠概念颇为重要，对相关概念的理解透彻，在发现问题、分析问题、解决问题的过程中会起到至关重要的作用。 下面将梳理一些重要概念： 文档流（Normal Fl...

2018-05-02阅读(1808)赞(2)

一、变量声明 声明变量的时候，变量名前面要加两根连词线（--）。 body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中，body选择器里面声明了两个变量：--foo和--bar。 它们与color、f...

2017-09-27阅读(1882)赞(0)

一、什么是BFC？ 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的...