即便是很简单的静态页面也能写的很有意义

背景：一个简单的常规的静态页面，跟着张老师一行一行的code review ，用到了很多以前没有用到的属性，忽然发现写css，很有意义。打破了传统的思维模式，尝试用新的东西。把整件事变得很有意义了，要感谢张老师的指导。get到了新技能

怎么学习css？

MDN 文档，看里面的属性，哪一个不认识就点击进去学习。=> 很多没见过的可以好好学习了

想用新的属性但是不知道现在兼容性怎么样？

属性搜索兼容性：查看兼容浏览表就知道了

想用新的属性但是兼容性不好怎么办？

自己用js实现一个polyfill

使用了兼容性不怎么好但是很有意义的属性，会怎么样？

这件事情会变得很有意义很有意思，新的属性长了一个新鲜，自己有动手实现了一个可以替换新属性的方法

比如：Safari浏览器下的平滑滚动不支持scroll-behavior: smooth？

怎么兼容？

    // polyfill Safari浏览器下的平滑滚动
        eleImageBox.setScrollLeft = function (scrollLeft) {
          if (!CSS.supports('scroll-behavior: smooth')) {
            var step = function () {
              var numScrolDistance = scrollLeft - eleImageBox.scrollLeft;
              if (Math.abs(numScrolDistance) <= 3) {//距离少于的多少的时候滚懂完成
                eleImageBox.scrollLeft = scrollLeft;
              } else {
                eleImageBox.scrollLeft += numScrolDistance / 4;// 每次滚动的步伐

                requestAnimationFrame(step);
              }
            };
            step();
          } else {
            eleImageBox.scrollLeft = scrollLeft;
          }
        };

这里又学到了一个新的属性：CSS.supports(‘scroll-behavior: smooth’)

最近在项目里面用到了的我没有用到过的新属性

mask:css遮罩

客栈说书：CSS遮罩CSS3 mask/masks详细介绍

在项目中的使用：背景图片上面覆盖一个svg，可以实现背景颜色变化，svg也跟着变化

  background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.6 3.125c-.25 0-.35.2-.35.4v2.5c0 .15.05.25.15.3l1.5 1c.05.05.15.05.2.05.1 0 .25-.05.3-.15.1-.15.05-.4-.1-.5l-1.35-.9v-2.3c0-.2-.1-.4-.35-.4z'/%3E%3Cpath d='M6.652 1.125a4.908 4.908 0 0 0-4.9 5l-.85-.85a.392.392 0 0 0-.55 0c-.15.15-.15.4 0 .55l1.5 1.5c.05.05.15.1.25.1s.2-.05.25-.1l1.5-1.5c.15-.15.15-.4 0-.55a.392.392 0 0 0-.55 0l-.85.85v-.1c0-2.25 1.85-4.1 4.1-4.1 2.25 0 4.2 1.85 4.2 4.1 0 2.25-1.85 4.1-4.1 4.1-1.05 0-2.05-.4-2.8-1.1a.392.392 0 0 0-.55 0c-.15.15-.15.4 0 .55.9.85 2.1 1.3 3.3 1.3 2.7 0 4.9-2.2 4.9-4.9s-2.2-4.85-4.85-4.85z'/%3E%3C/svg%3E") no-repeat center;

scroll-behavior: 滚动的时候缓慢的弹性滚动，浏览器不支持的时候看上面的polyfill

scroll-snap-type: 滚动一个零界点的时候，是滚完这个动画还是回到最初的位置；用这个属性的时候子元素要设置零界点的开始位置scroll-snap-align

上面这里个配合在一起使用就能够实现滚动的时候有弹性的滚动，而不是bi的一闪而过。交互体验会更好

object-fit:和background-size 的contain，cover有点像，但是又有一点不一样

clip-path:使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以画一个任意的图形区域，让超出该图形区域的内容都隐藏

user-select:控制用户能否选中文本

CSS中内联SVG图片有比Base64更好的形式

看到图标的时候习惯性的想到了用iconfont，或者直接使用图片。一把索，肯定是不好的，对于重复使用不高的图标就可以使用svg作为背景图或者直接使用svg是一个更好的选择。如果说多色图标，图色不复杂，为了后期的可扩展性其实也是svg直接作为背景图片使用的。

以前我看到svg都是绕路走的，但是这一次看到领导用svg用的很溜，有些简单多色图片用svg的时候可以很好的扩展和变色。被他强大的功能给深深的吸引住了。于是我看了看svg的文档，其实就是一个html标签，里面有很多属性，他一点都不难。没事的时候看看MDN文档是一个很不错的习惯。推荐

学习了，CSS中内联SVG图片有比Base64更好的形式

svg 属性

svg 元素

-webkit-scrollbar:滚动条的样式

iPhoneX 的安全区域

padding-bottom: calc( constant(safe-area-inset-bottom) + 32px );padding-bottom: calc( env(safe-area-inset-bottom) + 32px );

第一次看到这个，查了一会之后原来是iPhoneX 的安全区域的设置，避免地底下那条黑色杠拦着了内容要配合viewport-fit=cover使用

网页适配 iPhoneX，就是这么简单

css 属性

box-shadow:属性用于在元素的框架上添加阴影效果,X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色,其中扩散半径的值可以用来模拟border效果，默认情况下，扩散半径越大，相当于border-width 的值也越大，还可以多个值写在一起

box-shadow 的属性 demo

outline 使用demo:outline 语法和border 语法一样

outline与box-shadow实现内圆角外正方形:描边并不会跟着元素的圆角走,因而显示出直角，但box-shadow却是会的。因此，如果我们把这两者叠加到一起，box-shadow会刚好填补描边和容器圆角之间的空隙，这两者的组合达成了我们想要的效果

background-position与background-origin:background-position是以padding box为准的，这样边框才不会遮住背景图片,因此我们改变background-origin:content-box;就可以实现background-position属性中使用的边角关键字将会以内容区的边缘作为基准，会有一点空余

background-image:radial-gradient:径向渐变

background-image:cross-fade(): 可以设置图片的透明度，但是不影响该元素上面文字的透明度，cross-fade()函数降低背景图像透明度实例页面

css 表达式

min:两个值里面取最小值

max:两个值里面最大的一个值

clamp:（clamp(MIN, VAL, MAX) 其实就是表示 max(MIN, min(VAL, MAX))）

上面三个支持计算的单位有：长度，角度，时间单位，百分比值，数值

attr:目前content支持，用来获取选择到的元素的某一HTML属性值，并用于其样式

any-hover:媒体查询特性

@media (any-hover: hover) {// 支持鼠标划过，并不准确
  a:hover {
    background: yellow;
  }
}
@media (any-hover: none) {// 不支持鼠标划过，并不准确
  a:hover {
    background: yellow;
  }
}

CSS any-hover any-pointer media查询与交互体验提升

var(): css 支持变量

小tips:了解CSS变量var

如何让MP4 video视频背景色变成透明？

background-blend-mode:背景图片如何混合在一起，有点像ps的混合模式

mix-blend-mode:和上面一样