边框:
盒子圆角：border-radius：5px / 20%；
border-radius:5px 4px 3px 2px; 左上，右上，右下，左下。
盒子阴影：
box-shadow：
box-shadow:x轴偏移量 y轴偏移量 阴影模糊半径(阴影颜色的模糊程度) 阴影扩展半径 阴影颜色 投影方式
注意：inset 是指阴影在盒子内部，默认在外部，inset写到第一个或者最后一个参数位置，其他位置是无效的。
值有3个时，表示距离左侧、距离上侧、影子颜色；
值有4个时，表示距离左侧、距离上侧、虚化的像素、影子颜色；
值有5个时，表示距离左侧、距离上侧、虚化的像素、影子颜色、是否显示在内部并且将颜色进行反转；
负值时，在相反的方向。
背景：
引入： background-image
背景尺寸： background-size
auto：默认值，不改变图片的大小
长度值：200px 50px 代表宽高依次是200 50。
百分比：同长度值
cover：填充整个外层容器
背景平铺：background-repeat
背景位置：
位置定位1（background-origin）：
根据文本位置：content-box，
根据边框位置：border-box，
根据内边距位置:padding-box，
使用这个属性，必须设置背景为no-repeat。
位置定位2（background-position）：top，right，bottom，left，background-position:距左多少 距右多少
多重背景：逗号分割：background-image:url(images/bg_flower.gif), url(images/border.png); background-repeat:no-repeat。
字体：
文本阴影：
text-shadow：三个值：分别代表距离左侧、距离上侧、阴影颜色 阴影会显示文字。
text-shadow：四个值：分别代表距离左侧、距离上侧、模糊程度及阴影颜色。
文本溢出属性：
overflow: hidden; white-space:nowrap;让文本强制不换行 要先设置这两个属性。
text-overflow：clip：修剪文本
自定义（string）：自己定义符号，给定的字符串来代表被修剪的文本。
文本换行属性：
word-break:
word-break:break-all：它的内容就会到200px自动换行，
如果该行末端有个英文单词很长（congratulation等），
它会把单词截断，变成该行末端为conra(congratulation的前端部分)，
下一行为tulation（conguatulation）的后端部分了。
word-break:break-word：区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
颜色之RGBA与透明度opcity：
R：红 G：绿 B：蓝 alpha:透明度的参数
RGB的取值范围是0~255/0~100% alpha的取值范围是0~1 不可为负值。
opcity：取值范围0~1。
渐变颜色：
background-image: linear-gradient(to bottom,#fff,red)：
参数说明：第一个参数指定渐变方向 to top,to bottom,to right,to left,to top left......
第二和第三个参数：是指定开始与结束的颜色值 可以有多个颜色background-image: linear-gradient(to bottom,#fff,black,red)。
图片：
图片圆角：border-radius: 50%;（设置椭圆形），
设置图片为响应式： max-width: 100%;height: auto;
图片阴影：box-shadow。
图片滤镜： filter
图片滤镜：模糊效果
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
高亮效果
.brightness {
-webkit-filter: brightness(0.30);
filter: brightness(0.30);
}
对比度
.contrast {
-webkit-filter: contrast(180%);
filter: contrast(180%);
}
灰色图像
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
色相旋转
.huerotate {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
反转输入图像
.invert {
-webkit-filter: invert(100%);
filter: invert(100%);
}
透明度
.opacity {
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
饱和度
.saturate {
-webkit-filter: saturate(7);
filter: saturate(7);
}
深褐色
.sepia {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
阴影效果
.shadow {
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
}
原文地址：https://www.cnblogs.com/www1842564021/p/11769612.html