对于用CSS 3D工作我已经有一些经验了，于是我的脑海里开始形成一个解决方案。我goggle搜索了像“CSS 3D cube”这样的关键词来确认我的想法，随后我回复Eugene说我可以。...我喜欢复杂的任务，所以我不能拒绝。在这一刻，我还没有意识到我正陷入其中，但我无法确定是否可以完成。...我需要展示1个像素的虚线，但看起来很糟糕模糊。 查看地址，由Anna Selezniova (@askd 在 CodePen)上编写。 我立马认识到问题出在哪了。...查看代码 ，由Anna Selezniova (@askd 在 CodePen)上编写。...我建了一个可以交互的样例，可以帮助你理解这个属性是如何工作的： 查看代码，由Anna Selezniova (@askd 在 CodePen)上编写。
class 名，届时只要直接套用到标签上就可以了，我们先用一个非常简单的案例来说明，请看下面的codepen[2]。...m：margin p：padding t：top r：right b：bottom l：left x：-right和-left y：-top 和 -bottom 若把上面排列组合就可以组合成下面的意思...my：margin-top 和 margin-bottom p：padding pt：padding-top pr：padding-right pb：padding-bottom pl：padding-left...都可以，但是现在也是一样都可以直接用预写 class 写在标签内就可以啰，像是 d-inline 或是d-block，就可以直接改值啰，看一下codepen 吧[4]。...若是有三个边要呈现，只有一个边要取消的话，可以用下面这种写法，用 border-方向-0 的方式来取消某一边。
实践过程中经常会遇到某个属性的使用，浏览器渲染效果与预期效果不符，虽然通过死记硬背能避免或巧妙应用这种效果，但总感心虚发慌、毫无自信，因为不知晓背后的原理。...我们总希望我们的布局是自适应的，即不依赖与所处环境，当环境改变时，仍能完美工作。下面这个实例要求蓝色购买按钮水平居中，其后跟随一个链接。...为了达到自适应布局，我们不能假设父级容器宽度固定，也不能假设蓝色按钮的文案固定，所以链接元素的位置也是根据上下文环境改变的。...不设置值也是可以实现的。...run-in不能插入本身为run-in的块中，也不能插入块中已有run-in的块中。 否则，run-in框变为块框。 浏览器支持：IE8+（chrome不支持，难道是太鸡肋？）
我之所以打算自己编写框架，是因为工作中重复的东西太多，通过框架可以很好的将这些零散组件整合到一起。另一方面，写个小项目，学点新知识是一件趣事。 编写框架是去年想做的事情，但因为时间原因，拖了很久。...类命名一直是我比较纠结的地方，刚开始工作的时候为了起一个见名知意又简洁的类名总是抓耳挠腮。我在编写框架时尽量避免与 Bootstrap 的类名重叠，但也不能完全避免。...我编写的栅格系统也是默认 12 列，但是后来发现 12 列的栅格缺少最常用的列宽（比如 10%、20%、30%等），比如下面 CodePen 展示的例子用 12 列栅格是无法完成的，所以我又添加了 10...{ border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .border-left { border-left: 1px...#eee; } .border-bottom { border-bottom: 1px solid #eee; } 关于辅助类的更多内容可以阅读这篇文章《如何编写通用的 Helper Class》
center; transform: rotate(30deg); } 效果如下： 源代码：codepen5 不过有个问题：这种方法实现的扇形，圆心角不能超过 180 度，那么对于圆心角大于 180...剩下的工作就是调整绝对定位的偏移量以及两个三角形旋转的角度。由于计算的偏差问题，这里得到的并不是标准的五角星，但总体思路是这样。...border-top: 70px solid #36d792; left:-40px; top:70px; } 源代码： codepen16 特殊菱形（九十度角） 仍然可以采用上面的方法，但更简单的方法是绕中心旋转一个正方形...太极图 这是最终要实现的效果： 虽然它似乎是由不规则的几何图形构成的，但实际上，我们可以用规则的几何图形堆叠形成太极图。...我们可能很容易想到，两段白色圆弧都分别是一个 1/4 红色圆形的边框，所以可以用下面的方式来做： 但这种方式无疑是很麻烦的，事实上，我们用 CSS3 的 box-shadow 内阴影来做会更加简单： /
因此在编写HTML结构时，将中间列节点挪到右列节点后面。...简单的「两行核心CSS代码」就能完成「十多行核心JS代码」的功能，何乐而不为呢。 简单回顾position属性值，怎样用就不说了，大家应该都熟悉。...竖向布局很常见，声明overflow:hidden;width:xpx;height:ypx就能实现，但横向布局却不能使用类似方式实现。 为了方便使用多种方式实现横向布局，以下将通用代码拆分出来。...最近笔者查看了Github上很多与间隔布局相关的CSS代码，虽然整体效果看上去无大碍，但margin/padding和结构选择器却乱用，因此笔者想从零到一纠正间距布局的正确编码方式。...声明其余节点 「G」：若希望容器顶部底部留空，使用border-top/border-bottom代替padding-top/padding-bottom 全部步骤串联起来理解可能会产生混乱，但结合以下代码理解相信就能很快熟悉
初看方案2的一堆代码可能会觉得非常难，但其实很多简单的图标都是非常容易实现的。 接下来就是妹子们最期待的茄果叔叔手把手教学时间啦。...分析一下，最外层的边框明显可以用border来做，然后用个before来做圆点也非常简单，关键是两座大山要如何绘制呢？box-shadow貌似可以做多层边框呢，然后加个旋转是不是就出来了呢？...我们在使用图标的时候，可能尺寸每次都不一样，但图标的尺寸都是有关联的，调整起来相当费劲。当然你可以会想到用zoom、scale来做缩放，但是这样的缩放线宽也会随之变化了。...图形学学的不好的话，那就比较痛苦了，如果不追求单标签的话，可以将每条边用一个标签表示，这样就很好处理了。 叔叔，我想装逼 怎么样？觉得上面这些都是小玩意？想装逼了？好，叔叔教你！ 蒙娜丽莎？什么鬼？...我会告诉你这也可以用一个单标签纯CSS画出来的吗？
因此，它们彼此不同，但各自都有各自的用处。 视口单位的用例 字体大小 ? CSS 视口单位非常适合响应式排版。...您可能还需要添加多个媒体查询，但这取决于你自己，也取决于项目的上下文。 事例地址：https://codepen.io/shadeed/pe......事例源码：https://codepen.io/shadeed/pe... 响应式元素 假设我们有一个作品集来展示我们的响应式设计工作，并且我们有三种设备(移动设备、平板电脑和笔记本电脑)。...事例地址：https://codepen.io/shadeed/pe... 垂直和水平间距 我想到的另一个有趣的用例是使用视口单位来表示元素之间的间距。...这可以与margin、top、bottom和grid-gap等值一起使用。使用时，间距将基于视口宽度或高度，这对于使布局更具动态性可能很有用。 模态框 对于模态，我们需要将它们从视口顶部推入。
不用急，这里有4种方法可以解决。...方案3：将 img 元素设置为 vertical-align: bottom 关键代码： img{ vertical-align: bottom; } 事例地址：https://codepen.io...关键代码 li:not(:last-child) { border-bottom: 1px solid #ebedf0; } 事例地址：https://codepen.io/qianlong/p.....{ border-top-color: #0097a7; } /*上*/ .triangle.top { border-bottom-color: #b2ebf2; } /*左*/ .triangle.left...这意味着容器可以被滚动，但滚动条被隐藏起来，就像它是透明的一样。
布局方法是用各种操作来控制文档流的行为。定位则不同：它将元素彻底从文档流中移走。它允许将元素放在屏幕的任意位置。还可以将一个元素放在另一个元素的前面或后面，彼此重叠。...跟固定或者绝对定位不一样，不能用 top、right、bottom 和 left 改变相对定位元素的大小。这些值只能让元素在上、下、左、右方向移动。...可以用 top 或者 bottom，但它们不能一起用（bottom 会被忽略）。同理，可以用 left 或 right，但它们也不能一起用（right 会被忽略）。...有时可以用这些属性调整相对元素的位置，把它挤到某个位置，但这只是相对定位的一个冷门用法。更常见的用法是使用 position: relative 给它里面的绝对定位元素创建一个包含块。...第一，z-index 只在定位元素上生效，不能用它控制静态元素。第二，给一个定位元素加上 z-index 可以创建层叠上下文。
ps: 公众号内不能插入外部链接，想要更好的阅读体验可以点击文末的阅读原文 ---- 本文属于意译而非直译，为了方便理解也增加了一些自己的语言，如果存在偏差或错误还请留言指正。...可在 CodePen 上查看真实效果和编辑代码 说明你现在可以使用任何类型的html 标签创建有序列表。 counter-reset 初始化计数器，该值是计数器的名称。默认情况下，计数器从0开始。...可在 CodePen 上查看真实效果和编辑代码 浏览器支持程度 86.5% caniuse 18. 创建动态阴影 创建类似于box-shadow的阴影，但基于元素本身的颜色。...CodePen上查看和编辑代码 说明浏览器会对字体进行逐个查找，如果找到的话就是用当前的，如果找不到字体（在系统上或在CSS中定义），则继续往后查找。...可在CodePen上预览效果和编辑代码 说明 --variable-name: 用这样的格式来声明变量。 var(--variable-name) 使用此函数在整个文档中重用变量。
大多数情况下，我们会使用 top: 50% ，但是现在，使用 bottom: 50% 会使后面的操作更简单。...原始 demo 用的是普通的 CSS，我们会使用 Sass 来减少代码量。...但是在我们的例子中，我们希望渐变从 top 到 bottom ，所以我们将 x2 的值从 100% 设置为 0% 并且将 y2 的值从 0% 设置为 100% 。...这意味着我们可以给一个更大的正方形元素设置渐变，然后裁剪成实际的形状。然而做这些工作会让 element() 和 mask 来创建渐变倒影的方法更加复杂。 Edge：可以全用SVG吗？...最后一步就是用 mask 给反射添加渐变。它的方法及代码和之前都是一样的，我们不再赘述。
、bottom、left、left top、top right、bottom right或者left bottom）。...渲染容器 其本身没有单独容器概念，大小只能是元素的border-box.不能选择性的线性渐变内容盒等。 渐变角度 默认值 to bottom 等于 180deg,如果是目标的效果可以不再额外设置。...我之前的场景的话，也是类似的思路不过是利用的一个线性背景做x方向的重铺，然后中间也是用span标签做白色背景。 – 这种方案的缺点可能是什么？...这里建议给大家一种flex的布局方案也可以实现，布局更为常规，利用了flex弹性盒的原理，当然横线背景也是渐变，但span部分没有渐变也没有背景色覆盖。...代码如下：其中flex:1就是实现利用剩余时间的。
用 的好处就是实现简单，兼容性强，拓展性高，但是美中不足的是标签语义化不强。...第二种就是用 来实现的。首先我们来看看效果： ?...，但是规范里并没有规定它的具体表现，所以各个浏览器厂商完全可以按照自己的喜好去定制，样式完全不可控，所以标签虽好。。...代码如下： .progress4 { display: block; font: inherit; height: 50px; width: 300px...以上 demo 都可以我的 codepen 上查看：https://codepen.io/krischan77/pen/QPezjB 点 “查看原文” 也可以看哦～
通过工作的实践总结，我觉得编写一套简单易用、通俗易懂的 helper 非常重要。本文的目的就是探讨 helper 的组成部分、编写方式以及如何精简 helper 的命名。...我认为，凡是可以量化的属性，比如 padding、margin、font-size、border-width 等，应该直接用数值表示，而对于不可以量化的属性，比如 box-shadow，用尺寸型命名比较合适...我们可以沿用之前的规则，可以量化的属性都用缩写，不可以量化的属性用简化的全称（比如 box-shadow 可以替换为 shadow）。...important; } 我觉得完全可以简化一步，用 - 表示负值，简单易懂，如下： .m-t--5 { margin-top: -5px !...总结 编写 helper 比编写框架要容易的多，但简单易用、通俗易懂的 helper 还需要严谨的思考，详细的 helper 可以参见 GitHub 源码。
: -70px; left: 0; } 完整的示例代码，你可以戳这里 CodePen Demo -- A Signle Div heartShape 渐变 & 多重渐变 毫不夸张的说，渐变是在单标签实现图形中...刚刚已经使用了元素本身和元素的一个伪元素，剩余一个伪元素实现底部的阴影圆即可，完整的 Demo 代码你可以戳这里：A Signle Div Rainy 简单总结一下 到这里，可以简单总结一下，单标签实现图形...完整的代码你可以戳这里：A Signle Div Shield 单个标签实现一个磁带 我们再看看这个图形，一个磁带图形： ?...这样，就顺利使用单个标签实现啦，该 Demo 取自 A Single Div，完整的代码你可以戳这里：CodePen Demo -- A single Div Disk。...完整的代码你可以戳这里：CodePen Demo -- A Single Div Ghost 最后 只使用 CSS 进行单 div 绘图还是非常有意思的，也可以比较好的锻炼 CSS，虽然业务中不一定会用上
不能对内联元素设置宽度或高度——它们只是位于块级元素的内容中。如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block。...通过使用 top，bottom，left 和 right 属性，可以精确指定要将定位元素移动到的位置。...同时，元素的位置发生变化，top，bottom，left 和 right 以不同的方式在绝对定位，它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的分析。...: lime; top: 10px; right: 10px; } https://codepen.io/cellinlab/pen/YzeJRbW 可以使用 z-index 属性更改绝对定位元素的堆叠顺序...https://codepen.io/cellinlab/pen/xxYymGb # 固定定位 固定定位 fixed，与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 <html
用例和事例 简单滑块 我们可以通过水平裁剪内容并使其滚动来创建快速简单的滑块。 ? 在上面的模型中，我们有水平放置的卡片，还有一个滚动条，可以滚动并显示更多内容。...border-top-left-radius: 7px; } .card-content { border-bottom-right-radius: 7px; border-bottom-left-radius...要解决该问题，我们可以主按钮添加overflow: hidden，并更改其对齐方式： .button { vertical-align: top; } 事例源码：https://codepen.io...Firefox scroll标签 在Firefox中，会向导致水平滚动的元素添加一个小标签。 ? 删除元素 有时，上述技术无效。...最后一个解决方案:使用overflow-x: hidden 最后，可以使用overflow-x：hidden解决水平滚动问题，但这一般是最后没办法的备用方案。
还有定位中的 left、top、right、bottom，它们表示了上下左右不同的方位。...在 Web 中，我们有 3 种方式可以控制文字方向： html实体 - 与 ） 与 标签 与 dir 属性 CSS 属性 direction + unicode-bidi...当然，现在这个功能完全可以用 transform 替代，但是在之前需要兼容 IE 系列的时候，不失为一个有意思的小技巧。 CSS 中的逻辑属性 下面一个章节，我们聊聊 CSS 中的逻辑位置。...然而，这种使用了 top/left/bottom/right 物理方向维度定义的属性，在不同的排版规则下，就非常容易出问题。...可以看到，无论 writing-mode 如何，padding-top 始终指代物理方向的上方。
一个非常简单的例子，上述我们创造了一个从黑色到透明渐变色，我们将它运用到实际中，代码类似这样： 下面这样一张图片，叠加上一个从透明到黑色的渐变， { background: url(image.png...CodePen Demo -- 使用 MASK 的基本使用 使用 MASK 进行图片裁切 利用上述简单的运用，我们可以使用 mask 实现简单的图片裁剪。...) bottom right, linear-gradient(45deg, transparent 15px, #fff 0) bottom left;...CodePen Demo -- MASK conic-gradient 转场 这个技巧，在张鑫旭的这篇文章里，有更多丰富的例子，可以移步阅读： 你用的那些CSS转场动画可以换一换了 运用这个技巧，我们就可以实现很多有意思的图片效果...CodePen Demo -- mask & filter & blend-mode 实际效果比截图好很多，可以点击 Demo 去看看。
领取专属 10元无门槛券
手把手带您无忧上云
