css扩展

一、用边框画三角形

不要的边框设置成透明（transparent）

div {
            height: 0;
            width: 0;
            border: 10px solid rgb(161, 44, 44);
            border-color: transparent transparent transparent rgb(156, 63, 63);

        }

二、UI状态伪类选择器

enable：匹配可用状态下的内容

disable：匹配禁用状态下的内容

checked：匹配选中状态下的内容

：：selection 文本内容中选中下的样式

三、层级选择器

父子

父>子

相邻兄弟选择器

哥哥+ 弟弟

通用选择器

哥哥~ 多个弟弟

四、背景剪裁

设置背景颜色的位置

background-clip

border-box：默认值，虚线边框下下也会有背景颜色

padding-box：边框线里面的盒子会有背景色

content-box：盒子里面内容有背景色

五、背景原点

设置背景图片的位置

background-origin

border-box：边框线下也会有背景图

padding-box：默认值，边框线内的盒子里有背景图

content-box：盒子内的内容区域才会有背景图

 

background-size：

设置背景图片的大小

100% 100%： 图片填满盒子，图片完整显示，缩放比例可能会变形

cover：图片填满盒子，图片等比例缩放，但是可以背景图片显示不完整（等同于100% auto），宽度占满，高度自适应。

contain：图片完整显示，图片等比例缩放，但是不一定填满盒子（等同于 auto 100% ），宽度自适应，高度占满。

六、多重背景

一个盒子可以插入多个背景图片，多张图片需要用逗号连接

background：url()，url（）

注意：背景颜色不能写在多重背景的第一个里面

 七、文本阴影

1、文本阴影

text-shadow：5px 5px 5px #000;

text-shadow：水平 垂直 模糊度 阴影颜色

2、文本阴影叠加

阴影叠加：5px 5px 5px #000，-5px -5px 5px red

叠加多个阴影用逗号隔开

 八、盒子阴影

盒子阴影有6个值

box-shadow：5px 5px 5px 5px green inset

1、水平位置，2、垂直位置，3、模糊度，4、阴影大小，5、颜色，6、inset（内阴影，不加inset就是外阴影）

盒子阴影可以叠加，用逗号隔开

 九、圆画边框

border-radius

1、可以设置多个值

1个值：4个方向

2个值：对角方向

3个值：左上角  右上角和左下角 右下角

4个值：从左上角开始   顺时针方向

2、可以设置水平角度和垂直角度

2、border-radius：20px / 80px

十、文本换行

1、word-wrap：智能换行

normal：默认一行放不下，换第二行，但是第二行还是一行放不下，那就超出了

break-word：默认一行放不下，换第二行，要是第二行还是放不下，超出的部分放到第三行

2、word-break：粗暴换行

break-all：粗暴换行，第一行放不下，就直接超出的内容放到下一行

keep-all：相当于只能换行的normal

 十一、width设置

1、fil-available（填充），可以让元素的宽度自动填充

2、fit-content：收缩内容的功能，设置宽度由内容撑开

3、max-content：取内容的最大值显示，文本内容强制不换行

4、min-content：取内容的最小值显示，文本内容默认最小值是一个文字的宽（英文内容不会换行）

十二、图片边框

border-image 属性是一个简写属性，用于设置以下属性

border-image-source：用在边框的图片的路径

border-image-slice：图片边框向内偏移（不加单位）

border-image-repeat：图像边框是否是平铺（repeat）、铺满（round）或拉伸（stretch），默认拉伸

border-image-outset：边框图像区域超出边框的量（值是一个倍数）

 十三、颜色模式（不常用，有色差）

色调、饱和度、亮度三个颜色通道的改变以及他们相互之间的叠加来获得各种颜色

十四、过度transition

1、transition-property：检索或设置对象中的参与过渡的属性

2、transition-duration：检索或设置对象过渡的持续时间

3、transition-delay：检索或设置对象延迟过渡的时间

4、transition-timing-function：检索或设置对象中过渡的动画类型

linear：匀速

ease：逐渐慢下来

ease-in：加速

ease-out：减速

ease-in-out：先加速后减速

十五、2D属性

1、scale设置的是2d的缩放，中心缩放，值是倍数

transform：scale（x宽度，y高度）

scaleX（x宽度）

scaleY（y高度）

2、translate设置的是偏移，原位置偏移，有点类似相对定位

transform：translate（x宽度，y高度），倾斜移动

translateX（x偏移）

translateY（y偏移）

 translate不能设置了X偏移后又第二行设置Y偏移，只能在同一个translate里面偏移。

transform：translateX（50px） translateY（40px）

或者是 transform：translate（x宽度，y高度）

移动值可以设置px，也可以设置%（本身宽高的百分比）

3、旋转 rotate，单位deg

rotate（ndeg），顺时针逆时针，正数顺时针，负值逆时针

rotateX（x），上下旋转

rotateY（y），左右旋转

4、倾斜skew

skew（X，Y）

skewX（x）

skewY（y）

5、transform-origin设置变形的原点

1、水平位置   2、垂直位置 （可以是方向单词，px，%）

十六、怪异盒子

box-sizing：border-box

怪异盒模型

总宽度：width（包含paddng和border）

总高度：height（包含padding和border）

 十七、单位

px

em：font-size的倍数，如果自身设置了font-size，那么就是自身的倍数，如果自身没有设置font-size，那么就是父元素的倍数。

rem：根元素html的font-sze的倍数值，可以是小数，一般都设置html的font-size：100px

vw：当前屏幕（包含滚动条）宽度的百分比

vh：当前屏幕（包含滚动条）高度的百分比