<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background: #101129;
			}

			h1 {
				color: #08ACEE;
			}

			.box1>div {
				display: inline-block;
			}

			.d-img {
				width: 400px;
				height: 300px;
				/* 是用于告诉浏览器如何计算一个元素是总宽度和总高度 */
				box-sizing: border-box;
				/* 边框 : 像素 线 颜色 */
				border: 20px solid #101129;
				border-image: url(./img/border.png) 51 32 18 66;
				/* border-width属性设置一个元素的四个边框的宽度
					这里设置宽度是为了更好的显示边框图片，如有疑问可以注释看下效果
				 */
				border-width: 51px 36px 21px 65px;
				/* 相对定位，为了方便在div里添加的内容div定位 */
				position: relative;
			}

			.bg {
				width: 340px;
				background: #08ACEE;
				position: absolute;
				top: -20px;
				left: -40px;
			}

			.mg {
				margin: 20px;
			}

			/* 样式2 */
			.div_border {
				width: 400px;
				height: 330px;
				box-shadow: -10px 0px 15px #034c6a inset,
					0px -10px 15px #034c6a inset,
					10px 0px 15px #034c6a inset,
					0px 10px 15px #034c6a inset;
				border: 1px solid #034c6a;
				box-sizing: border-box;
				position: relative;
				margin-top: 25px;
			}
			
			.div_title {
			    background-color: #034c6a;
			    border-radius: 18px;
			    position: absolute;
			    height: 35px;
			    width: 60%;
			    top: -15px;
			    color: #ffffff;
			    font-weight: bold;
			    font-size: 16px;
			    left: 20%;
			    line-height: 35px;
			    text-align: center;
			}
			
			.div_title img {
			    width: 18px;
			    height: 18px;
			    position: relative;
			    top: 4px;
			    margin-right: 5px;
			}
			
			/*  */
			.box1 .main_left {
			    width: 400px;
				height: 300px;
			}
			
			.box1 .main_left>div {
			    width: 100%;
			    height: 280px;
			    box-sizing: border-box;
			    border: 1px solid #2C58A6;
			    position: relative;
			    box-shadow: 0 0 10px #2C58A6;
			}
			
			.t_line_box {
			    position: absolute;
			    width: 100%;
			    height: 100%;
			}
			
			.t_line_box i {
			    background-color: #4788fb;
			    box-shadow: 0px 0px 10px #4788fb;
			    position: absolute;
			}
			/* 左上边框 */
			.t_l_line {
			    height: 5px;
			    width: 26px;
			    left: -3px;
			    top: -3px;
			}
			
			.l_t_line {
			    width: 5px;
			    height: 24px;
			    left: -3px;
			    top: -3px;
			}
			
			/* 右上边框 */
			.t_r_line {
			    height: 5px;
			    width: 26px;
			    right: -3px;
			    top: -3px;
			}
			
			.r_t_line{
				width: 5px;
				height: 24px;
				right: -3px;
				top: -3px;
			}
			/* 左下 */
			.l_b_line{
				height: 5px;
				width: 26px;
				left: -3px;
				bottom: -3px;
			}
			
			.b_l_line{
				width: 5px;
				height: 24px;
				left: -3px;
				bottom: -3px;
			}
			/* 右下 */
			.r_b_line{
				height: 5px;
				width: 26px;
				right: -3px;
				bottom: -3px;
			}
			
			.b_r_line{
				width: 5px;
				height: 24px;
				right: -3px;
				bottom: -3px;
			}
			
			/* 样式3 */
			.main_left div .main_title {
			    width: 210px;
			    height: 35px;
			    line-height: 33px;
			    background-color: #2C58A6;
			    border-radius: 18px;
			    position: absolute;
			    top: -17px;
			    left: 50%;
			    margin-left: -90px;
			    color: #fff;
			    font-size: 18px;
			    font-weight: 600;
			    box-sizing: border-box;
			    padding-left: 45px;
			    z-index: 1000;
			}
			
			 .main_left div .main_title img {
				width: 18px;
				height: 18px;
			    position: absolute;
			    top: 8px;
			    left: 20px;
			}
			/* 样式4 适合小按钮类型 */
			.imgdiv {
			    width: 100px;
			    height: 50px; 
			    background-image: url(./img/anniu04.png);
			    background-position: center center; 
			    background-size: 100% 100%;           
			    background-repeat: no-repeat;
				text-align: center;
				color: #43C9FE;
				vertical-align: center;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<!-- 样式1 -->
		<div class="box1 mg">
			<h1>样式1</h1>
			<div class="d-img">
				<div class="bg">
					好看的边框样式，适用于大数据平台页面，炫酷
				</div>
			</div>
			<div class="mg">
				<h1>原本的图片</h1>
				<img src="img/border.png">
			</div>
		</div>
		<!-- 样式2 -->
		<div class="box1 mg">
			<h1>样式2</h1>
			<div class="div_border">
				<div class="div_title">
					<img src="./img/title_1.png">各部门采集数据量
				</div>
			</div>
		</div>
		<!-- 样式3 -->
		<div class="box1 mg">
			<h1>样式3</h1>
			<div class="main_left">
				<div style="cursor: pointer;">
					<!--左上边框-->
					<div class="t_line_box">
						<i class="t_l_line"></i> 
						<i class="l_t_line"></i> 
					</div> 
					<!--右上边框-->
					<div class="t_line_box">
						<i class="t_r_line"></i> 
						<i class="r_t_line"></i> 
					</div> 
					<!--左下边框-->
					<div class="t_line_box">
						<i class="l_b_line"></i> 
						<i class="b_l_line"></i> 
					</div> 
						<!--右下边框-->
						<div class="t_line_box">
						<i class="r_b_line"></i> 
						<i class="b_r_line"></i> 
					</div> 
					<div class="main_title">
						<img src="./img/title_1.png" alt="">
					  各部门采集数据量
					</div>
				</div>
			</div>
		</div>
		<!-- 样式4 -->
		<h1>样式4 太高或太宽会出现拉伸，故适合小按钮类型 </h1>
		<div class="imgdiv">登录</div>
	</body>
</html>

border.png图片 

下面这张图片为白色有点看不见，点击右键另存为即可，也可以使用图标代替 （./img/title_1.png）

按钮素材

# css # html
Logo
亚马逊云科技技术品牌专区

更多推荐

STM32节点移植lorawan协议连接腾讯云物联网开发平台（IoT Explorer）

STM32移植lorawan协议连接腾讯云物联网开发平台（IoT Explorer）前言前言在移植协议之前，先给大家科普一下Lora 和 lorawan 的区别。LoRa 是LPWAN通信技术中的一种，是美国Semtech公司采用和推广的一种基于扩频技术的超远距离无线传输方案。这一方案改变了以往关于传输距离与功耗的折衷考虑方式为用户提供一种简单的能实现远距离、长电池寿命、大容量的系统，进而扩...

avatar 亚马逊云科技技术品牌专区
cover

物联网主机E6000引领工业自动化的新篇章

avatar 亚马逊云科技技术品牌专区

搞 IoT 物联网，你居然要懂这么多种协议...

物联网协议是指在物联网环境中用于设备间通信和数据传输的协议。根据不同的作用，物联网协议可分为传输协议、通信协议和行业协议。传输协议：一般负责子网内设备间的组网及通信。例如 Wi-Fi、Ethernet、NFC、 Zigbee、Bluetooth、GPRS、3G/4G/5G等。这些协议能够确保在网络上传输的数据的安全性和可靠性。通讯协议：主要是运行在传统互联网TCP/IP协议之上的设备通讯协议，负责

avatar 亚马逊云科技技术品牌专区