背景色渐变处理-linear-gradient

最新推荐文章于 2024-04-17 02:19:38 发布

aliveAmy

最新推荐文章于 2024-04-17 02:19:38 发布

阅读量1.1k

点赞数

分类专栏：前端技术-css 文章标签： css

本文链接：https://blog.csdn.net/xieamy/article/details/70051644

版权

前端技术-css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

处理各个浏览器间的兼容，背景色渐变

background: -moz-linear-gradient(top, #0192ed 0%, #0baeb3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0192ed), color-stop(100%,#0baeb3));
    background: -webkit-linear-gradient(top, #0192ed 0%,#0baeb3 100%);
    background: -o-linear-gradient(top, #0192ed 0%,#0baeb3 100%);
    background: -ms-linear-gradient(top, #0192ed 0%,#0baeb3 100%);

如果想要在两种颜色之间创建一条硬线(而非逐渐过渡)，可以将相邻的颜色停止点设置为相同的位置。
比如有时候table中有些样式难以达到预期效果时，可以通过这种比较tricky的方式来设置~

 th {
        background: linear-gradient(to bottom, blue 1px, orange 1px, orange, orange calc(100% - 1px), blue calc(100% - 1px));
    }

示例效果如下：
在这里插入图片描述

这相当于给table的th加了一个蓝色背景以及上下边框。
（别问我为什么不直接设置背景色和tr的border, 头部，左右部分固定的table样式真的太难调了！简直调到崩溃，css互相影响，再加上使用组件库固有的样式，复写，重置，真的是绝望，再次体会到大师说的话：不要一上来就去过度封装！！！根本不知道使用场景，过度封装组件库根本没法用好吗？？？）