2020六月四日css学习

一：页面需要将盒子进行旋转，而内容保持正常
1.可以使用盒子嵌套的方式，反向的进行调整

<div class=\"one\"><div>neirong</div></div>.one{width: 100px;height: 100px;margin: 100px auto;background-color: skyblue;text-align: center;line-height: 100px;transform: rotate(45deg);}.one div{transform: rotate(-45deg);}

2.可以使用伪元素的方式进行调整

<div class=\"one\">neirong</div>.one{width: 100px;height: 100px;margin: 100px auto;text-align: center;line-height: 100px;position: relative;}.one::after{content: \'\';position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: skyblue;z-index: -1;transform: rotate(45deg);}

相比于第一种方式，第二种方式不会增加额外的标签。
二：clip-path属性的使用
clip-path可以将元素进行裁剪成我们想要的样子
他的属性有：
1：inset（）剪裁矩形，里面可以填写五个参数分别为五个方位的裁剪位置，以及是否需要圆角

.one{width: 100px;height: 100px;margin: 100px auto;background-color: skyblue;clip-path: inset(20px 20px 20px 20px round 10px);}

2：circle（）剪裁圆形，里面可以有两个参数，圆的半径以及圆心位置

.one{width: 100px;height: 100px;margin: 100px auto;background-color: skyblue;clip-path: circle(50% at 50px 50px);}

3：ellipse() 剪裁椭圆，里面有三个参数，椭圆的短轴半径，椭圆的长轴半径，以及椭圆的圆心位置

.one{width: 100px;height: 100px;margin: 100px auto;background-color: skyblue;clip-path: ellipse(30px 40px at 50% 50%);}

4：polygon() 剪裁多边形，参数为各个点的坐标位置

.one{width: 100px;height: 100px;margin: 100px auto;background-color: skyblue;clip-path: polygon(24% 0,10% 50%,0 60%);}

三：利用渐变实现切割四个角

.one {width: 100px;height: 100px;margin: 100px auto;background: linear-gradient(-135deg, transparent 15px, #58a 0) top right,linear-gradient(135deg, transparent 15px, #58a 0) top left,linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,linear-gradient(45deg, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;}