记录最近遇到的css问题

记录1： 合作方h5页面在部分手机微信webview打开，flex换行盒子里图片样式错乱，设置的宽度100%失效

机型：iphone13，微信版本：8.0.62
重点：safari打开正常展示

简略代码如下：

<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;
}

表现形式：样式名为ad-card 的背景图宽度失效，消失不见，且下面的多个card错乱。如下图所示：下图中的两个盒子是card

9c98288f4d48fe2d586371160ac46d2.png

为什么确定是100%宽度失效导致的呢？
在浏览器里去掉ad-card的100%样式，就可以复现。可以确定是flex盒子里设置的宽度无效

使用img标签，图片可以展示，但是宽度还是无效，直接撑满，出现横向滚动条。效果如下图：

99789e730368ba65198e08d327ef0f9.png

解决：转移ad-card到flex外层。

记录2：border bottom设置渐变色：例如左右两边虚化的效果

首先：border-bottom不支持渐变,可以考虑用伪类实现

.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%,  /* 左侧完全透明 */
        #ff0000 50%,     /* 中间红色（线的位置） */
        transparent 100% /* 右侧完全透明 */
      );
    }
}

实际效果如下图：

c2b7edce15e8579050e537cf6715469.png

记录3：使用伪类实现整个border设置渐变色

要注意：由于使用了伪类，定位到了四周。此时就不能给元素设置overflow: hidden了

注意使用渐变色中的160deg 用来调解颜色的走向
&::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 进行混合

{
    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 有多个值。背景色不突出的时候可以换别的值试试

注意：如果发现ios上透明图不见了，这时候可以调整顺序：将图片置于渐变上层，确保深色部分参与混合

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

记录5: 实现文字渐变 + 文字白色边框

// 文字渐变
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; /* 白色描边阴影 */

注意：如果一个文字设置了渐变，同时使用文字渐变（background-clip: text）和文字阴影（text-shadow）时，两者因渲染层级冲突会导致阴影失效

解决： 用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; /* 禁用继承的阴影 */
}