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>
视频上传有误,就不进行具体的演示。