記錄1： 合作方h5頁面在部分手機(jī)微信webview打開，flex換行盒子里圖片樣式錯(cuò)亂，設(shè)置的寬度100%失效

機(jī)型：iphone13，微信版本：8.0.62
重點(diǎn)：safari打開正常展示

簡(jiǎn)略代碼如下：

<div class="card-container">
  <div class="ad-card"></div> 
   <div class="card"></div> 
    <div class="card"></div>
<div>


.card-container {
  display: flex;
    justify-content: space-between;
    margin-bottom: 5vw;
    gap: 4vw;
    flex-wrap: wrap;
}
.ad-card {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 30vw;
    min-height: 30vw;
    max-height: 30vw;
    border-radius: 5vw;
    background-size: contain;
    background: url(圖片) center / contain no-repeat;
}
.card {
    flex: 1;
    min-width: 42vw;
    height: 71.67vw;
    border-radius: 5vw;
    border: 0.53vw solid transparent;
}

表現(xiàn)形式：樣式名為ad-card 的背景圖寬度失效，消失不見，且下面的多個(gè)card錯(cuò)亂。如下圖所示：下圖中的兩個(gè)盒子是card

9c98288f4d48fe2d586371160ac46d2.png

為什么確定是100%寬度失效導(dǎo)致的呢？
在瀏覽器里去掉ad-card的100%樣式，就可以復(fù)現(xiàn)?？梢源_定是flex盒子里設(shè)置的寬度無效

使用img標(biāo)簽，圖片可以展示，但是寬度還是無效，直接撐滿，出現(xiàn)橫向滾動(dòng)條。效果如下圖：

99789e730368ba65198e08d327ef0f9.png

解決：轉(zhuǎn)移ad-card到flex外層。

記錄2：border bottom設(shè)置漸變色：例如左右兩邊虛化的效果

首先：border-bottom不支持漸變,可以考慮用偽類實(shí)現(xiàn)

.tab {
    position: relative;
    margin: 28rpx 0 8rpx;
    height: 64rpx;
    padding: 0 42rpx;
    &::after { 
        content: '';
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        height: 1rpx;
         background-image: linear-gradient(
        to right,        /* 水平方向漸變 */
        transparent 0%,  /* 左側(cè)完全透明 */
        #ff0000 50%,     /* 中間紅色（線的位置） */
        transparent 100% /* 右側(cè)完全透明 */
      );
    }
}

實(shí)際效果如下圖：

c2b7edce15e8579050e537cf6715469.png

記錄3：使用偽類實(shí)現(xiàn)整個(gè)border設(shè)置漸變色

要注意：由于使用了偽類，定位到了四周。此時(shí)就不能給元素設(shè)置overflow: hidden了

注意使用漸變色中的160deg 用來調(diào)解顏色的走向
&::after { 
    content: '';
    position: absolute;
    bottom: -4rpx;
    left: -4rpx;
    right: -4rpx;
    top: -4rpx;
    z-index: -1; /* 位于背景漸變層之上，但在主元素之下 */
    background: linear-gradient(160deg, #C7C7C0 0%, #3FE4E9 25%, #DF1AFE 50%, #6002F9 75%);
    border-radius: 38rpx;
}

記錄4: 有漸變背景色 + 透明背景圖。使用background-blend-mode 進(jìn)行混合

{
    background: linear-gradient(180deg, #360087 0%, #1F004F 100%), url("@/static/img/skin-bg.png");
    background-size: cover;
    background-blend-mode: lighten, normal;
}

background-blend-mode 有多個(gè)值。背景色不突出的時(shí)候可以換別的值試試

注意：如果發(fā)現(xiàn)ios上透明圖不見了，這時(shí)候可以調(diào)整順序：將圖片置于漸變上層，確保深色部分參與混合

{
    background: url("./img/login-bg.png") 0 0 no-repeat, #C2EDFE;
    background-blend-mode: multiply;
}

記錄5: 實(shí)現(xiàn)文字漸變 + 文字白色邊框

// 文字漸變
background: linear-gradient(90deg, #631ACF 0%, #2970F7 100%);
background-clip: text;
-webkit-background-clip: text;
 -webkit-text-fill-color: transparent;


白色邊框
text-shadow: 
        -3px -3px 0 white,  
        0   -3px 0 white,
        3px -3px 0 white,
        3px  0   0 white,
        3px  3px 0 white,
        0    3px 0 white,
        -3px  3px 0 white,
        -3px  0   0 white; /* 白色描邊陰影 */

注意：如果一個(gè)文字設(shè)置了漸變，同時(shí)使用文字漸變（background-clip: text）和文字陰影（text-shadow）時(shí)，兩者因渲染層級(jí)沖突會(huì)導(dǎo)致陰影失效

解決： 用data-attr

 <div class="gradient-shadow-text" data-text="兌換成功">兌換成功</div>


    .gradient-shadow-text {
    position: relative;
    font-size: 60px;
    font-weight: bold;
    color: white; /* 底層文字顏色（用于陰影） */
    text-shadow: 
        -1px -1px 0 white,  
        0   -1px 0 white,
        1px -1px 0 white,
        1px  0   0 white,
        1px  1px 0 white,
        0    1px 0 white,
        -1px  1px 0 white,
        -1px  0   0 white; /* 白色描邊陰影 */
}

.gradient-shadow-text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #FC843B 0%, #FF3E54 80%, #FC4698 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* 上層漸變文字 */
    text-shadow: none; /* 禁用繼承的陰影 */
}