技術標籤：筆記前端css

css實現漸變邊框

首先上需求：

要實現一個漸變邊框，然後經過一番探索，來吧展示

<view class="borderLine">
	<view class="borderInner">
		<text class="test">測試</text>
	</view>
</view>

.borderLine {
	width: 260rpx;
	height: 260rpx;
	background-image: linear-gradient
 
(99deg, 
		#ff3535 24%, 
		#ffbd68 100%);
	position: relative;
	margin: 0 auto;
}
.borderInner {
	width: 256rpx;
	height: 256rpx;
	background-color: #FFFFFF;
	position: absolute;
	bottom: 2rpx;
	left: 2rpx;
	text-align: center;
	line-height: 256rpx;
}
.test {
	font-size: 66rpx;
	background: linear-gradient
 
(to bottom, #d00f14, #fe714a);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

實現原理就是利用定位 在一個漸變盒子裡定位一個純色盒子 這裡字型也用了一個漸變效果
1.案例中background-image和background實現的效果是一樣的，但是它們的差別還是挺大的，background是相關屬性的連寫
2.CSS3 background-clip 屬性 規定背景的繪製區域 結合color設定成transparent實現字型漸變效果

像下面這種兩端漸變的細線

<view class="lineVertical"></view>

page {
	background-color: #C0C0C0;
}
.lineVertical{
       width:1rpx;
       height:186rpx;
       background:linear-gradient(244deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
	margin: 30rpx auto;
   }