supming1的专栏

纯css 实现不规则领券标签想了好几个思路都有一些缺点1、用border-image,浏览器有最小字体限制，如果设计图小于最小字体，可能拉伸图片，造成两侧有一些扭曲。2、把两端独立切图，再合中间拼接，中间部分用border, 这种如果移动端需要做1px，应该图片和border粗细会对不上。3、整个当成一个规则的长方形，把两个小圆单独用css写，再用定位覆盖到两端，这种没什么缺点，采用这种方法。以下是代码<span className=..

postcss-write-svg的一些坑

css实现图片按比例缩放自适应父级，最长边充满父级，另一边按比例缩放，避免图片拉伸或压缩导致变形。

css多行文本超出显示省略号，以2行为例，网上很多解决方法，如下。之前一直采用的是这种方法，最近发现无效了。vant也是这种写法，.txt-ellipsis-2 { display:-webkit-box; overflow: hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; text-overflow: ellipsis; word-break: break-all;}排查后发现

前端有时候会接到文字颜色渐变，同时有文字阴影的需求，如下图一般会想到如下实现方法// 实现文字颜色渐变background-image: linear-gradient(360deg, #f6130c 0%, #f87052 100%);-webkit-background-clip: text;webkit-text-fill-color: transparent;// 实现文字阴影text-shadow: 0 4rpx 0 #bc6d05;理想很丰满，现实很骨感，上面代码的

css 设置超出宽度的文字显示为省略号？ {//注意要能设置宽度overflow : hidden;width:100px;white-space:nowrap;//强制在一行显示-o-text-overflow: ellipsis;//兼容operatext-overflow:ellipsis;//网上说不能

文字换行：1、西方字体默认在半角空格或连字符的地方换行，中文字体在任何地方都能换行。2、word-break:break-all 允许在单词内换行。3、长单词自动换行 word-wrap:break-word

本文是官方文档的翻译，原文见：https://dockyard.com/blog/2018/02/01/writing-your-first-postcss-plugin本文删除了大部分原文不是太有用的相关介绍，只保留原文编写插件部分，并将原本分步讲解的代码合在一起，写上对应注释。什么是 PostCSS?PostCSS 使我们能够 js 函数操作 CSS . 它做了下面三件事情:1、PostCS...

纯css实现图片根据最大的边适应外框<div class="box"> <img src="**********.jpg"></div>.box { position:relative;}img { // 根据最大的边适应外框 max-height: 100%; max-widt...