初学者,日益维新,记录所学点点滴滴

今日学习了

1.字体图标的使用方法,首先我们需要去iconfont官网去下载一些字体图标,字体图标这一块与精灵图相比,他们的区别在于精灵图是多个颜色,最低为两种颜色,而字体图标是单个颜色

2.运用字体图标

第一步先引入iconfont.css
<link rel="stylesheet" href="./fonts/iconfont.css">
第二步填写类名
<i class="iconfont icon-gouwuchekong"></i>

3.transform几个属性名的运用,有transform :translate(x,y) 位移 

 transform: rotate 旋转 单位是(deg)  度 还有(turn)圈    正值代表顺时针 负值代表逆时针

 transform: scale 缩放 scale(1)表示原始状态 大于1表示放大,小于1表示缩小

4.倾斜

.box {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 200px auto;

            /* 倾斜  skew(角度deg)*/
            /* 倾斜的度数不要超过90度 */
            transform: skew(45deg);
        }

5.渐变色

用的属性是 background-image: linear-gradient(颜色1,颜色2,颜色,)中间颜色用逗号隔开

background-image: linear-gradient(to right, red, blue, yellow);这个代表改变颜色方向

 .box {
            width: 400px;
            height: 400px;
            /* linear-gradient线性渐变(颜色1,颜色2....) */
            /* background-image: linear-gradient(red, blue, yellow); */

            /* to(到哪里去...)属性 改变渐变色的方向   */
            background-image: linear-gradient(to right, red, blue, yellow);

            /* 不能使用to属性,换成deg */
            background-image: linear-gradient(45deg, red, blue, yellow);

            /* 几个常用的背景色 */
            /* 透明色到黑色半透明 */
            background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));

            /* 透明色到白色半透明 */
            background-image: linear-gradient(transparent, rgba(255, 255, 255, 0.5));
        }