css3_背景

css3 渐变 效果

	.b {
		height: 50px;
		width: 300px;
		margin: 20px auto;
		border: salmon solid;
		/* 属于背景图 所以 可以size....等等 */
		/* 0deg 由下指向上*/
		background-image: repeating-linear-gradient(90deg, red 0px, red 4px, white 4px, white 8px);
		background-size: 100% 2px;
		background-position: 0px 50%;
		background-repeat: no-repeat;
	}			
	
	.c {
		width: 300px;
		height: 300px;
		margin: 50px auto;
		background-color: #282828;
		/*背景可以有多个写到一起*/
		background-image: radial-gradient(black 15%, transparent 16%), radial-gradient(black 15%, transparent 16%), radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
		background-position: 0px 0px, 8px 8px, 0px 1px, 8px 9px;
		background-size: 16px 16px;
	}		
	

画虚线、画背景

猜你喜欢

转载自www.cnblogs.com/myniu/p/11880687.html
今日推荐