CSS

resize:

/*水平方向调整大小 和overflow一起用*/
.box{
            width: 200px;
            height: 200px;
            background-color: royalblue;
            resize: horizontal;
            overflow: hidden;
        }

box-shadow

  .box {
            width: 200px;
            height: 200px;
            background-color: royalblue;
            margin: 0 auto;
      /* 水平位置 垂直位置 模糊程度 外延值 颜色 内外*/
            box-shadow: 10px 10px 5px 3px #888888 inset;
        }
      /* 水平位置 垂直位置 模糊程度  颜色 */
            box-shadow: 10px 10px 5px #888888 ;

opacity（0~1）透明度整个元素增加透明效果

background

.box{
            background-image: url(../../public/1.gif);
            background-size: cover;					/**/
            background-repeat: no-repeat;           /*是否重复*/
            background-origin: content-box;        /*背景图起点*/
    		background-clip: padding-box;             /*超出padding的内容不呈现*/
}

border

 border-top-left-radius: 30px 20px;      /*椭圆的X半径=30，y半径=20*/

文本溢出

white-space:nowrap;
text-overflow: ellipsis;
overflow: hidden;

换行

white-space: pre-wrap;     			pre按照原文显示 		pre-line去掉左右空格

  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(7,94,179,1)"><path d="M9.97308 18H14.0269C14.1589 16.7984 14.7721 15.8065 15.7676 14.7226C15.8797 14.6006 16.5988 13.8564 16.6841 13.7501C17.5318 12.6931 18 11.385 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 11.3843 6.46774 12.6917 7.31462 13.7484C7.40004 13.855 8.12081 14.6012 8.23154 14.7218C9.22766 15.8064 9.84103 16.7984 9.97308 18ZM14 20H10V21H14V20ZM5.75395 14.9992C4.65645 13.6297 4 11.8915 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 11.8925 19.3428 13.6315 18.2443 15.0014C17.624 15.7748 16 17 16 18.5V21C16 22.1046 15.1046 23 14 23H10C8.89543 23 8 22.1046 8 21V18.5C8 17 6.37458 15.7736 5.75395 14.9992ZM13 10.0048H15.5L11 16.0048V12.0048H8.5L13 6V10.0048Z"></path></svg>');

变换

位移：transform: translate(-50%, -50%);

.outer {
				width: 200px;
				height: 200px;
				border: 2px solid #000;
				margin: 0 auto;
				position: relative;
			}
			.inner {
				width: 200px;
				height: 200px;
				background-color: aquamarine;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);       /*参考自身的宽高*/
			}

缩放：transform: scale(0.5)

/*修改字体大小*/
span{
				font-size: 20px;
				display: inline-block;
				transform: scale(0.5);
				
}

旋转：transform: rotateZ(70deg);

过渡

.box{
		width: 200px;
		height: 200px;
		background-color: royalblue;
		transition-property: height;    /*颜色、长度、百分比*/
		transition-duration: 0.3s;
	}
	.box:hover{
		height: 400px;
	}