电上店下官网

2020223

 子元素的margin / padding（注意是：top / right / bottom / left）根据父元素的宽度作为参考

 

20210224

 

20210226

 

 20210227

 

20210305

20210311

 

<style>
    .box {
        float: left;
        width: 200px;
        height: 200px;
        margin: 0 20px 20px 0;
        line-height: 200px;
        color: #fff;
        font-size: 20px;
        text-align: center;
        font-weight: 800;
        border-radius: 5px;
        background: rgba(232,206,211,1) linear-gradient(180deg, rgba(232,206,211,0) 100px, rgba(48, 150, 181, 1) 0);
    }

    .box:hover {
        background: rgba(48,150,181,1) linear-gradient(180deg, rgba(48,150,181,0) 100px, rgba(232, 206, 211, 1) 0);
        box-shadow: 0 0 12px 2px rgba(37,10,10,.54);
        transition: all .6s;
    }
</style>
<div class="box">HOW</div>
<div class="box">ARE</div>
<div class="box">YOU</div>
<div class="box">GIRL</div>
<!--
background: #000 linear-gradient(#000, #f00);
background-color: #000;
background-image: linear-gradient(#000, #f00);

因为一些原因，在设置元素背景时，设置使用background渐变实现，当鼠标移入时，要改变选中项的颜色，伴有过渡效果。
但background:linear-gradient(#000, #f00)不支持transition过渡，
在不改变页面结构情况下，考虑使用background-color,background-image结合实现过渡。

这里background-color和background-image结合的原理：
background-image属性值有效情况下，会覆盖background-color属性值。
这里div.box宽高是200px,渐变上部分设置为透明的，也就是前半截100px的背景色为background-color颜色。
当div.box:hover时，transition:all .6s，可以发现前半截100px颜色改变是过渡效果的，后半截没有。
这里注意的是，background-image的前半截透明度都为0。

要更好检测background-color支持渐变可以将background-image的前后部分透明度设置为0
要更好检测background-image不支持渐变可以将background-image前后部分透明度设置为1
-->

 

 

待续~