2022年CSS汇总

https://mp.weixin.qq.com/s/zEQf8xk2T3PkNGf3plPnqw

CSS 如何根据背景色自动切换黑白文字？

通常这种情况，大家可能会通过 js 去计算背景色的深浅度（灰度），算法是公开的，如果已知颜色的RGB值，那么可以通过以下方式得到颜色灰度


luma = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255

CSS 如何实现羽化效果？

https://mp.weixin.qq.com/s?__biz=MzIyMDc1NTYxNg==&mid=2247486560&idx=1&sn=0b46e57c42eb40e1e052f32748050ca2&chksm=97c66fafa0b1e6b988019f8dd85c236ccd5ee90de64d538b701712e6ba466e21086a188e7cec&token=1658981151&lang=zh_CN&scene=21#wechat_redirect

.head{
  -webkit-mask: radial-gradient(closest-side circle,#000 60%, transparent 100%);
}


.content{
  -webkit-mask: '遮罩图片' ;
}

矩形羽化

<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <body class="wrap" xmlns="http://www.w3.org/1999/xhtml">
      <style>
        .wrap{
          box-sizing: border-box;
          margin: 0;
          height: 100%;
          padding: 10px;
        }
        .shadow{
          height: 100%;
          background:black;
          border-radius:10px;
          box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black
        }
      </style>
      <div class="shadow"></div>
    </body>
  </foreignObject>
</svg>

.name{
  -webkit-mask: url('./fearher.svg')
}

[1]
foreignObject: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

[2]
SVG在线压缩合并工具 : https://www.zhangxinxu.com/sp/svgo/

[3]
CSS feather (juejin.cn): https://code.juejin.cn/pen/7175466278134480908

[4]
CSS feather (codepen.io): https://codepen.io/xboxyan/pen/ZERZrQw

[5]
CSS feather (runjs.work): https://runjs.work/projects/51eece3c132040f2

文档更新时间: 2023-01-15 20:50 作者：admin

CSS 如何根据背景色自动切换黑白文字？

CSS 如何实现羽化效果？

CSS 绘制一个3d掘金 logo

CSS 如何设置自动滚动定位的间距？

借助 :has 实现3d轮播图

CSS 实现可拉伸调整尺寸的分栏布局

CSS 实现头像名称首字符自动占位

::target-text 选择器

CSS 补全字符串？