css圆角边框渐变、文字渐变、文字阴影的组合(实际业务)

背景

我们toC的项目，ui设计的某些按钮都是带圆角渐变边框、文字渐变、文字阴影的。 业务紧张时段也是直接切图，后来发现这种按钮几乎成了标准需求，决定还是要研究下css实现方案。

圆角边框渐变

1、一般ui设计图上有自带css代码，如：

width: 360px;
height: 100px;
background: linear-gradient(180deg,pink 0%, skyblue 71%);
border: 12px solid;
border-image: linear-gradient(178deg, red 0%, blue 99%) 6 6;
border-radius: 38px;

效果：没有圆角

2、给border-image带圆角的方案，加上clip-path

width: 360px;
height: 100px;
background: linear-gradient(180deg,pink 0%, skyblue 71%);
border: 12px solid;
border-image: linear-gradient(178deg, red 0%, blue 99%) 6 6;
border-radius: 38px;
+ clip-path: inset(0 round 12px);

效果：有外圆角、没有内圆角

3、使用background-image、background-clip代替border-image

width: 360px;
height: 100px;
border: 12px solid transparent;
border-radius: 38px;
background-image: linear-gradient(180deg,pink 0%, skyblue 71%), linear-gradient(178deg, red 0%, blue 99%);
background-origin: border-box;
background-clip: content-box, border-box;

效果：有内外圆角

注意：圆形， 例如border-radius: 50%，上述方法失效

// 解决方案
.container {
  position: relative;
  background-image: $borderColor;
  border-radius: 50%;
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - #{$borderWeight * 2});
    height: calc(100% - #{$borderWeight * 2});
    border-radius: 50%;
    background-image: $backgroundColor;
  }
}

文字渐变带上阴影

1、一般ui设计图上有自带css代码，完全就实现不了文字渐变，就不贴出来了： 2、正常文字渐变方案

  background: linear-gradient(180deg, #f69f45, #da0c00);
  -webkit-background-clip: text;
  color: transparent;

效果如下

加上文字阴影

  background: linear-gradient(180deg, #f69f45, #da0c00);
  -webkit-background-clip: text;
  color: transparent;
 + text-shadow: 1px 1px 1px #fff;

效果： 由于文本颜色是背景渐变呈现，实际color: transparent; 文本阴影自然挡住背景色

3、多加一层dom，让该层dom实现text-shadow, 且在背景色之下

// html
 <View className='btn' id='按钮文字'>
   <Text className='btn-txt'>按钮文字</Text>
 </View>

// scss
.btn {
  position: relative;
  &-txt {
       background: linear-gradient(180deg, #f69f45, #da0c00);
      -webkit-background-clip: text;
      color: transparent;
  }
  &::before {
     // 用属性是为了更好的提取css，项目用的Taro小程序，使用dom自定义属性需配置，这里为了方便使用了id
     content: attr(id);
     position: absolute;
     z-index: -1;
     text-shadow: 1px 1px 1px #fff;
  }
}

效果：白色阴影就出来了

参考

# 巧妙实现带圆角的渐变边框

# stackoverflow: border-radius-together-with-a-border-image

# CSS 实现文字阴影 + 文字渐变色