css 实现文字渐变、文字描边、uniapp引入字体、弧形背景、引入iconfont

文字渐变

从上到下

.text { 
    background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}

从左到右

.text { 
    background: -webkit-linear-gradient(0deg,#eee, #333);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}

文字渐变、引入字体

 const CATEGORY = [{         bgcolor: 'rgba(32, 107, 81, 0.2)',         color: '-webkit-linear-gradient(0deg, #BAFDA5, #6DEFD1)'     },     {         bgcolor: 'rgba(144, 76, 156, 0.2)',         color: '-webkit-linear-gradient(0deg, #FFC8FF, #A071EB)'     },     {         bgcolor: 'rgba(60, 110, 141, 0.2)',         color: '-webkit-linear-gradient(0deg, #B8FFFF, #228190)'     },     {         bgcolor: 'rgba(143, 127, 79, 0.2)',         color: '-webkit-linear-gradient(0deg, #FFFBE9, #FFE961)'     } ]
 
<uni-row :gutter="24">
    <uni-col :span="6" v-for="(item,index) in categories" :key="index">
        <view :style="cid===item.cid ? {background:item.bgcolor} :{}" class="item flex-center"
            @click="categoryChange(item.cid)">
            <view
                :style="{background:item.color,'-webkit-background-clip': 'text','-webkit-text-fill-color':'transparent'}"
                class="name">{{item.cname}}</view>
            <view class="chance font-size-left-11">{{item.chance}}%</view>
        </view>
    </uni-col>
</uni-row>

// 引入字体
@font-face {
    font-family: 'newfont';
    src: url('@/common/css/youshe.ttf') format('truetype');
}

.item {
    width: 100%;
    // 矩形
    transform: skew(-30deg); 

    .name {
        font-size: 24rpx;
        font-family: newfont;
        margin-right: 10rpx;
        // 避免歪斜影响
        transform: skew(30deg);
    }

    .chance {
        color: #fff;
        transform: skew(30deg);
    }
}

效果图：

参考链接：blog.csdn.net/weixin_4339…

文字描边：

-webkit-text-stroke: 2px red

文字阴影：

text-shadow: 2px 2px 4px #000000;

描边：baijiahao.baidu.com/s?id=175190…

弧形背景：

<view class="arc-bg"></view>
.arc-bg {
	position: absolute;
	top: 0rpx;
	left: 0rpx;
	width: 100%;
	height: 250rpx;
	background-color: #ff0000；
}
.arc-bg::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0rpx;
	width: 100%;
	height: 150rpx;
	background-image: radial-gradient(ellipse 60% 70px at 50% 0,#ff0000 99%,#fff 100%);
}

效果图：

或

<view class="arc-bg"></view>
.arc-bg{
    width: 100%;
    height: 200rpx;
    background-color: #ff0000;
    border-radius: 0 0 100% 100%/0 0 150rpx 150rpx;
}

效果图：

uniapp引入iconfont

1、在static目录下创建iconfont.css

复制css文件内容到项目中

@font-face {
  font-family: "iconfont"; /* Project id 4546125 */
  src: url('//at.alicdn.com/t/c/xxx.woff2?t=1715851548212') format('woff2'),
       url('//at.alicdn.com/t/c/xxx.woff?t=1715851548212') format('woff'),
       url('//at.alicdn.com/t/c/xxx.ttf?t=1715851548212') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    align-items: center;
}

.icon-home:before {
    content: "\e730";
}

2、在App.vue引入

@import 'static/iconfont.css';

3、使用

<text class="iconfont icon-home"></text>