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;
}