边框渐变及背景模糊效果

button {
				color: #23b7cb;
				font-size: 15px;
				padding: 5px 15px;
				background: #fff;
				border: 1px transparent solid;
				border-radius: 30px;
				position: relative;
			}

			button:after {
				content: '';
				position: absolute;
				top: -3px;
				bottom: -3px;
				left: -3px;
				right: -3px;
				background: linear-gradient(90deg, #000781, #c8cb06);
				border-radius: 30px;
				content: '';
				z-index: -1;
			}

　　

<button>进入平台</button>

 

背景图片模糊

.container {
				height: 400px;
				width: 400px;
				border: 2px solid gray;
				position: relative;
				overflow: hidden;
			}

			.container .image {
				position: absolute;
				height: 400px;
				width: 400px;
				top: 0;
				z-index: -1;
				-webkit-filter: blur(5px);
				filter: blur(15px);
				transform: scale(1.2);
				overflow: hidden;
			}

			.container .image img {
				width: 100%;
				height: 120%;
			}

			.container .image-shadow {
				position: absolute;
				height: 100%;
				width: 100%;
				top: 0;
				background: rgba(0, 0, 0, .2);
				z-index: -1;
				opacity: 0.5;
			}

　　html

<!-- 背景区域 -->
		<div class="container">
			<!-- 背景图区域 -->
			<div class="image">
				<img src="http://test.h3399.cn/uploads/imgs/201804/1523953618303.jpg" alt="Alternate Text">
			</div>
			<!-- 设置背景模糊 -->
			<div class="image-shadow"></div>
		</div>