前端

文本阴影：

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

text-shadow:第一层，第二层，第三层；

在单词内部换行：

word-wrap:;normal默认值，不允许在单词内部换行

break-word 允许单词在内部换行

word-break:; break-all允许在单词内部换行

keep-all 允许在换行点换行，单词内部不换行

box-shadow:水平阴影 垂直阴影 模糊度 阴影大小 颜色；

默认影子在外面（忽略不写）

设置影子在内部（inset)

box-shadow:第一层阴影，第二层阴影，第三层阴影；

字体图标：1、去官网下载

2、在页面引入外部文件

3、挑选对应的类名

方式二：1、在页面引入链接地址

2、在页面引入外部文件

3、去官网下载

4、修改引入css文件

background-origin:;背景图起点位置

padding-box起点从内边距开始

border-box起点从边框开始

content-box起点从内容区域开始

background-clip:;背景图裁剪

border-box从边框位置开始裁剪

padding-box从内边距位置开始裁剪

content-box从内容位置开始裁剪

background-size:;背景图大小 % px

第一个值 水平大小

第二个值 垂直大小

如果只给一个值，宽高等比例缩放

cover等比例缩放，铺满元素

contain等比例缩放，某一个方向铺满元素

background:url(),url(),url();多张背景图效果

颜色模式：(hsl)hsla:

h 色调 0-360

s 饱和度 0%-100%

l 亮度 0%-100%

边框图片：border-image-source:url(“图片地址”)，默认在元素的四个角落

border-image-sclice:垂直显示，水平显示；

显示图片的区域范围（没有单位，不能为负数）

按照九宫格的切法来显示图片

数值越小，切的越少，图片会放大

数值越大，切的越多，图片效果相对缩小

border-image-repeat:;是否平铺

repeat 从中间往两头平铺

round 从一头往另一头平铺

stretch 拉伸（有可能会变形）

border-image-outset:;边框的倍数

border-radius:;圆角（四个角呈顺时针）

border-radius:左上右下 右下左上

左上 右上左下 右下

左上 右上 右下 左下

单位：% px

border-radius:水平圆角/垂直圆角

width:;

-webkit-fill-available让元素自适应父元素的高度或宽度

fit-content 让一个元素适应内容的一个高度

max-content适应元素撑起来的最大宽度

min-content适应元素撑起来的最小高度