.box{
background-color: brown;
width: 200px;
height: 200px;
border-radius: 5px 10px 25px 40px;/*圆角，四个像素从左上到左下顺时针设定，像素越大越圆*/
border: 1px black solid;
box-shadow: black 50px 10px 5px;/*盒子阴影，水平/垂直阴影的位置，最后设置阴影模糊距离*/
}
.box1{
background-image: url(./素材/fish.jpg);
width: 200px;
height: 200px;
padding: 30px;
border: black 3px solid;
background-size: 150px;/*背景图大小*/
background-repeat: no-repeat;
background-origin: content-box;
background-color: blue;
box-sizing: border-box;/*宽度高度设置box/center*/
}
.box2{
text-shadow: red;
width: 150px;
height: 100px;
border: cornsilk 5px solid;
word-wrap: break-word;/*自动换行*/
}
.box3{
border: solid #000000 1px;
width: 400px;
height: 400px;
column-count: 3;/*规定元素被分割的列数*/
column-gap: 5px;/*列之间间隔的大小*/
}
.box4{
width: 300px;
height: 300px;
border: solid #000000 1px;
transform: translate(10px,10px);/*水平/垂直移动*/
transform: rotate(30deg);/*顺时针旋转度数*/
transform: scale(1.1);/*>1放大，<1缩小*/
transform: skew(30deg,30deg);/*x轴/y轴旋转*/
}
.box5{
width: 150px;
height: 150px;
border: solid 1px #000000;
transition: all 3s;/*过渡，所有方向变化过程为三秒*/
}
.box5:hover{
width: 300px;
height: 300px;
}
.box6{
width: 700px;
height: 300px;
border: solid 1px #000000;
overflow: hidden;
}
.box6 img{
transition: transform 2s;/*过渡，框内图片变化时间为两秒*/
}
.box6 img:hover{
transform: rotate(45deg)
}
.box7{
width: 100px;
height: 100px;
border: solid #000000 1px;
animation: act 10s;/*动画名称 时间*/
}
@keyframes act{
from{background-color: violet;}
to{background-color: yellow;}
}
