css（背景）画出纵向的一条线 - 纯css3纵向时间轴

Posted 2022-04-16 Rudon滨海渔村

效果图

核心代码

.oneBoxForRecord 
  padding-top: 10rpx;
  /* #e5e5e5是页面背景色，#CCC是纵向线条的灰色 */
  background: linear-gradient(to right, #e5e5e5 0%, #e5e5e5 23px, #CCC 24px, #e5e5e5 25px, #e5e5e5 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;

background-size: 100% 100%; 代表背景色占据容器100%高、宽
background-repeat: no-repeat;  代表不重复

background: linear-gradient(to right, #e5e5e5 0%, #e5e5e5 23px, #CCC 24px, #e5e5e5 25px, #e5e5e5 100%);
代表背景色从左到右，
0%位置-至-左起23px位置的颜色为#e5e5e5渐变到#e5e5e5 （其实是一样的颜色）
左起23px-至-左起24px位置的颜色为#e5e5e5渐变到#CCC （1像素宽纵线）
左起24px-至-左起25px位置的颜色为#CCC渐变到#e5e5e5 （1像素宽纵线）
左起25px-至-最右边(100%)位置的颜色为#e5e5e5渐变到#e5e5e5 （其实是一样的颜色）

 

完整代码uniapp

<template>
	<view>
		
		
		<view class="padding40 marginCol30">
			<view class="oneBoxForRecord">
				
				<view class="rowStart colAlignItemsCenter">
					<view class="col rowEnd width30px">
						<view class="bgColorWhite border3RpxBlue radius50pct width10px height10px"></view>
					</view>
					<view class="col paddingRow20 colorGray">
						09:50
					</view>
					<view class="col">
						产品推广
					</view>
				</view>
				<view style="padding-left: 40px;" class="colorGray paddingBottom40">
                    郑州市XX股份有限公司
				</view>
				
			</view>
		</view>
		
		
		
		
	</view>
</template>

<script>
	export default 
		components: ,
		data() 
			return 
				
			
		,
		onReady() 
			
		,
		methods: 
			
		
	
</script>

<style>
	.oneBoxForRecord 
		padding-top: 10rpx;
		background: linear-gradient(to right, #e5e5e5 0%, #e5e5e5 23px, #CCC 24px, #e5e5e5 25px, #e5e5e5 100%);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		
	
</style>

推荐没有广告的百度首页

百度绿色版 - Rudon滨海渔村https://baidu.rudon.cn

封面