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; }
画虚线、画背景