嘛积累下css也是很有必要的

关于背景的

background:radial-gradient(circle at center, whiite,gray) 背景向内 由灰逐渐变白
height:calc(30em * 0.667);

关于伪类伪元素的

伪元素是可以根据被伪元素的设置定位，p{position:relative} p::brfore{content:’\260E’}

关于box-shadow的

box-shadow: inset -.5em -.1em .3em rgba(1,1,1,.5), inset -.5em -.1em .3em rgba(1,1,1,.5);
box-shadow: 右移动px 下移动px 大小(会模糊化的)px 缩放大小px 颜色; 可以为负值来达到反响移动。
box-shadow:inset 内左向右延申px 内上向下延申px 模糊px 缩放px 颜色。
想写多个box-shadow的话，请使用“,”间隔开，多个box-shadow 是隔绝的，不会互相影响

关于border-image的

border-image 将会取代border设置的样式。
规范上面要求，设置border-image前，必须设置border,但有些浏览器没有遵循。
假如border-image-source: none 或者url(asdsa.png)不可用的时候，border的样式将会被启用。

初始值：

[]

   border-image-source:none;
border-image-slice:100%;
border-image-width:1;
border-image-outset:0;
border-image-repeat:stretch;
 

适用元素：全部，除非设置了border-collapse:collapse; 这个元素同样也使用于::first-letter。
你也可以不利用图片，例如设置linear-gradient(red, yellow); | radial-gradient:…;

border-image: url() 30; 30是平时border:30的意思

png图片展示，说明这个border其实是拉伸，中间内容padding 将现实为内容而已。

css变量

[]

   :root { //:root是根元素选择器
  –font-size: 8px;  //全局定义的变量
}
.window {
  font-size: var(–font-size, 20px) //默认值20px，意思是假如css寻找不到这个变量的话，就默认值为20px吧。
  //有什么用？  对代码定义处理更加清晰吧，向后兼容？？ 哇估计不行吧
}
 

变量的定义语法为： – 使用的语法为： var(–) 。 代表没有任何限制，css选择器不能数字开头 js濒临不能直接数组，但css变量没有任何的限制。
但是，不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文
变量也是分权重的，和css权重一个概念

 p{
   –font:90;
font-size: var(–font)px;   //不不 并不能这样用…   因为会被“编译”成 90   px   后面是有空格的，所以这个就能用了
 }
 
 p{
   -font:90;
font-size: calc( var(-font) 

1px ); //这才是正确的打开方式
}

有一个很不错的用法

[]

.group {
left: calc(var(–x)2);
right: calc(var(–y)2);
}
.group miao {
–x: 2em;
–y: 4em;
}

在scss中这叫@mixin
对比scss有什么优势？ 没有… 原生css吧 唯一优势… 不不 还有一个优势 就是可以直接在调试器中用按钮 上下调位置 结合scss就完美了(这是我想法.. 我不肯定能用)

figure

语义化插入图片和描述，里面也有自己的样式

rotate 角度

background: linera-gradient(45deg, #f36, #389)
渐变色是可以选择角度的, 就相当于把背景旋转的意思啦。

color: hsla(角度，饱和度，亮度，透明度)

自定义滚动条，在线设置网站

点我link

超级小的知识

border是占空间的，outline是不占空间的，他在border的外面 outline的作用就是 css调试啦~

transition: transitionX(0.1em);
假如你在外面使用了hover改变了transition 然后鼠标移开的时候，会直接变回原样
那么你可以在该元素上加一个transition: 0.3s

border-radius: 左 上 右 下

cursor:pointer 这个是鼠标移动到这里，改变鼠标的样式