css 形状

cssCommon.sass

.circle {
	border-radius: 50%;
	width: 200px;
	height: 200px; 
	/* width and height can be anything, as long as they're equal */
	 box-shadow: 0 0 0 10px rgba(255, 78, 82, 0.50);
}

/*border line-gradient*/
.border-grad{
    border: 2px solid transparent;
    -moz-border-image: -moz-linear-gradient(left, transparent,#384F96, #384F96,transparent);
    -webkit-border-image: -webkit-linear-gradient(left, transparent, #384F96,#384F96,transparent);
    -o-border-image: -o-linear-gradient(left, transparent,#384F96, #384F96,transparent);
    border-image: linear-gradient(to right, transparent, #384F96,#384F96,transparent);
}

/*div gradient*/

.div-class{
  position: relative;
  width; 200px;
  height 200px;
  &:after{
    position: absolute;
    content:"";
    left: 0px;
    right:0px;
    height 100%:
    width: 100%;
    background: line-gradient(to right, red, blue, green , transparent);
  }
}

/* vertical align center*/
/* if you know the height of the child element, for example 100px*/
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

/* if you do not konw the height of the child element*/
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}