CSS使用总结——矩形四个角设置正方形样式+设置文本颜色渐变

羊角鱼

已于 2023-01-31 17:09:09 修改

阅读量777

点赞数

文章标签： css 前端 html

于 2023-01-31 16:54:19 首次发布

本文链接：https://blog.csdn.net/quqiaoluo5620/article/details/128797257

版权

1、矩形四个端点为实体正方形

.outer{
    // 设置四个角的颜色
    background: linear-gradient(to left,#23cfde，#23cfde) no-repeat left top,
                linear-gradient(to left,#23cfde，#23cfde) no-repeat right top,
                linear-gradient(to left,#23cfde，#23cfde) no-repeat left bottom,
                linear-gradient(to left,#23cfde，#23cfde) no-repeat right bottom;
    
    // 设置四个角的宽高
    background-size: 0.2rem 0.2rem,
                     0.2rem 0.2rem,
                     0.2rem 0.2rem,
                     0.2rem 0.2rem;
}

2、文字颜色渐变

// 基本理念类似ps的蒙版
.gradient{
    // 容器背景色
    background-image:linear-gradient{
        180deg,
        rgba(255,255,255,100) 10%, 
        #1dbfb8 100%
    };

    // 定义元素背景裁剪区域, 
    background-clip: text;  // 只有文字部分才显示背景色
    -webkit-background-clip: text;  // 浏览器兼容性

    // 将文字本身颜色设置为透明
    -webkit-text-fill-color: transparent;
}