1：边框圆角：border-radius
边框圆角共有四个值，四个值依次控制左上圆角,右上圆角，右下圆角，左下圆角。
例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.max{margin: 20px auto;width: 400px;height: 400px;border-radius: 15px 20px 25px 30px;background-color: rgb(30,250,151);}</style></head><body><div class="max"></div></body></html>
实现效果
2：颜色的渐变：需要用到的代码：transition: ？,?;
第一个问号填的值控制需要变化的是什么，后一个问号控制的是变化所需要的时间
例
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div {margin: 0 auto;width: 300px;height: 300px;background-color: #0000FF;transition: all 2s;}div:hover {height: 600px;/* background-image: linear-gradient(green,black,yellow); */background-color: gold;}</style></head><body><div class=""></div></body></html>
视频上传有误，就不进行具体的演示。
