这里是修真院前端小课堂,每篇分享文从
【CSS可以绘制哪些常见的特殊形状? 】
大家好,我是IT修真院北京分院25期的学员,一枚正直纯洁善良的web前端程序员
今天给大家分享一下,修真院官网css任务5,深度思考中的知识点——CSS可以绘制哪些常见的特殊形状
1.背景介绍
在写网页的时候,会遇到需要装饰一些几何图形的情况,用css就可以实现很多特殊形状的绘制。它的特点是放大后图像不会失真,文件的占用空间较小,也可以减少http的请求。
2.知识剖析
在css绘制图形时,一般要使用到border-radius,transform(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)等属性来实现
border-radius的值可以设定为具体的长度或者是百分比。当border-radius的值为百分比时,相对的是包含边框,padding后的尺寸。而不是单纯地相对于width/height值。
旋转 rotate
用法:transform: rotate(45deg);
共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。
缩放 scale
用法:transform: scale(0.5) 或者 transform: scale(0.5, 2);
参数表示缩放倍数;
一个参数时:表示水平和垂直同时缩放该倍率
两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。
倾斜 skew
用法:transform: skew(30deg) 或者 tr