Html
    Css
    Js


.gradient-block-vertical {
	float:left;
	margin:50px;
	width:250px;
	height:250px;
	box-sizing:border-box;
	border:20px solid transparent;
	background-clip:padding-box,border-box;
	background-origin:padding-box,border-box;
	background-image:linear-gradient(#fff,#fff),linear-gradient(#5c5fa5,#893f60);
}
.gradient-block-horisontal {
	margin:50px;
	float:left;
	width:250px;
	height:250px;
	box-sizing:border-box;
	border:20px solid transparent;
	background-clip:padding-box,border-box;
	background-origin:padding-box,border-box;
	background-image:linear-gradient(90deg,#fff,#fff),linear-gradient(90deg,#5c5fa5,#893f60);
}
.gradient-block-diagonal {
	float:left;
	position:relative;
	width:250px;
	height:250px;
	margin:50px;
	box-sizing:border-box;
	border:20px solid transparent;
	background-clip:padding-box,border-box;
	background-origin:padding-box,border-box;
	background-image:linear-gradient(45deg,#fff,#fff),linear-gradient(45deg,#5c5fa5,#893f60);
}

↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS边框渐变

2
      0
      2017/3/1 17:44:00

      horisontal

      应该是这样的吧

      (horizontal)

          D C xc0
          2017/8/2 14:30:52

          你可真细心。

      回复
  短信接口