1、阴影
（1）文本阴影
text-shadow:水平阴影 垂直阴影 模糊度 颜色; 例如：text-shadow:4px -4px 10px red；
多层文本阴影的设置：text-shadow:第一层阴影,第二层阴影,第三层阴影; 例如：text-shadow:4px -4px 10px red,6px -7px 10px yellow,8px -9px 10px purple;
（2）盒子阴影
box-shadow:水平阴影 垂直阴影 模糊度 阴影大小 颜色 内外阴影(可选);
/*默认影子在外面(忽略不写)，设置影子在内部( inset )*/
例如：box-shadow:10px 10px 10px 10px red inset;
box-shadow:第一层阴影,第二层阴影,第三层阴影;
例如：box-shadow:10px 10px 10px 10px red,15px 15px 15px 10px yellow,20px 20px 20px 15px skyblue;
2、在单词内部换行
word-wrap:normal/break-word; normal 默认值,不允许在单词内部换行。break-word 允许在单词内部换行
word-break:break-all /keep-all; break-all 允许在单词内部换行。keep-all 允许在换行点换行,单词内部不换行
3、inconfon字体图标
方式一: 在本地引入
<1>: 去官网下载
<2>: 在页面引入外部css文件
<3>: 挑选对应的类名
方式二:在线引入
<1>: 在页面引入链接地址
<2>: 挑选对应的类名
<3>: 去官网下载
<4>: 修改引入css文件的路径
彩色图标引入方式:
<1>: 引入外部iconfont.js文件
<2>: 在style中添加
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
<3>: <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-名字"></use>
</svg>
4、背景相关属性
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();多张背景图效果
5、边框图片:
border-image-source:url("图片地址");默认在元素的四个角落
border-image-slice:垂直显示 水平显示;
显示图片的区域范围，没有单位,不能为负数，按照九宫格的切法来显示图片
数值越小,切的越少,图片会放大；数值越大,切得越多,图骗效果相对缩小
border-image-repeat:;
repeat 从中间往两头平铺，有可能出现半个的情况。
round 从一头往另一头平铺
stretch 拉伸(有可能会变形)
6、颜色：
<1>颜色单词 red blue green十六进制表示： #000000 #ff0000 #ffffff
<2>rgb() r red 0-255 ；
g green 0-255
b blue 0-255
a alpha 0-1 透明
例如：rgba(10,50,250,0.8)
<3>hsl(0,100%,50%):
hsla(200,70%,70%,0.6):
h 色调 0-360
s 饱和度 0%-100%
l 亮度 0%-100%
a 透明 0-1
7、圆角:圆角变化呈顺时针变化px %
border-radius:四个角;
border-radius:左上右下 右上左下;
border-radius:左上 右上左下 右下;
border-radius:左上 右上 右下 左下;
border-radius:水平圆角/垂直圆角;
例如：border-radius:10px 30px 40px 50px/40px 30px 30px 10px;
8、宽高属性值：
width:; height:;
-webkit-fill-available 让元素自适应父元素的宽度或者高度
fit-content 让一个元素适应内容的一个宽度/高度
max-content 适应元素撑起来的最大宽度/高度
min-content 适应元素撑起来的最小宽度/高度