#CSS# 使用absolute（绝对定位）与relative（相对定位），实现盒子四个拐角样式 （附源码）

需求：实现盒子四个拐角样式

效果如下：

 思路：

（1）首先用一个有宽度及高度的父盒子，包裹4个子盒子（即盒子的四个拐角）

<view class="main-pto">
	<view class="left-top-corner"></view> //左上角
	<view class="right-top-corner"></view> //右上角
	<view class="left-bottom-corner"></view> //左下角
	<view class="right-bottom-corner"></view> //右下角
</view>

（2）先写出一个子盒子的样式，后面3个拐角以此类推即可 

例如：左上角的示例如下

.main-pto { //父盒子
		position: relative; //相对定位
		width: 512upx;
		height: 794upx;
		margin: 100upx auto; //与顶部距离100upx,且居中
		margin-bottom: 0;

		.left-top-corner { //子盒子(左上角）
			position: absolute;  //绝对定位
			top: 0; 
			left: 0;
			width: 43upx;
			height: 43upx;
			border-top: 7upx solid #ED6636; //边框：尺寸 实线（虚线） 颜色
			border-left: 7upx solid #ED6636;
}

（3）接着写出盒子的边框样式，例如左上角就是会涉及到border-top以及border-left 

边框顺序-----border:尺寸 实线（虚线） 颜色

.main-pto { //父盒子
		width: 512upx;
		height: 794upx;
		margin: 100upx auto; //与顶部距离100upx,且居中
		margin-bottom: 0;

		.left-top-corner { //子盒子(左上角）
			width: 43upx;
			height: 43upx;
			border-top: 7upx solid #ED6636; //边框：尺寸 实线（虚线） 颜色
			border-left: 7upx solid #ED6636;
		}

（4）通过定位进行实现，在父盒子里面使用相对定位，在子盒子里面使用绝对定位

（子绝父相）

.main-pto { //父盒子
		position: relative; //相对定位
		width: 512upx;
		height: 794upx;
		margin: 100upx auto; //与顶部距离100upx,且居中
		margin-bottom: 0;

		.left-top-corner { //子盒子(左上角）
			position: absolute;  //绝对定位
			width: 43upx;
			height: 43upx;
			border-top: 7upx solid #ED6636; //边框：尺寸 实线（虚线） 颜色
			border-left: 7upx solid #ED6636;
}

（5）根据位置的不同，设置子盒子与父盒子的距离

例如：左上角盒子与父盒子的距离就是：顶部为0，左边为0

top:0;left:0

.main-pto { //父盒子
		position: relative; //相对定位
		width: 512upx;
		height: 794upx;
		margin: 100upx auto; //与顶部距离100upx,且居中
		margin-bottom: 0;

		.left-top-corner { //子盒子(左上角）
			position: absolute;  //绝对定位
			top: 0; 
			left: 0;
			width: 43upx;
			height: 43upx;
			border-top: 7upx solid #ED6636; //边框：尺寸 实线（虚线） 颜色
			border-left: 7upx solid #ED6636;
}

（6）再依次写出另外3个角的样式（主要是距离父盒子的位置以及边框的位置）

.right-top-corner { //子盒子(左下角）
			position: absolute;
			top: 0;
			right: 0;
			width: 43upx;
			height: 43upx;
			border-top: 7upx solid #ED6636;
			border-right: 7upx solid #ED6636;
		}

		.left-bottom-corner { //子盒子(右上角）
			position: absolute;
			bottom: 0;
			left: 0;
			width: 43upx;
			height: 43upx;
			border-bottom: 7upx solid #ED6636;
			border-left: 7upx solid #ED6636;
		}

		.right-bottom-corner { //子盒子(右上角）
			position: absolute;
			bottom: 0;
			right: 0;
			width: 43upx;
			height: 43upx;
			border-bottom: 7upx solid #ED6636;
			border-right: 7upx solid #ED6636;
		}

源码如下：

<template>
	<view>
		<view class="main-pto">
			<view class="left-top-corner"></view> //左上角
			<view class="right-top-corner"></view> //右上角
			<view class="left-bottom-corner"></view> //左下角
			<view class="right-bottom-corner"></view> //右下角
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		},	
	}
</script>

<style lang="scss"> //定位：子绝父相
	.main-pto { //父盒子
		position: relative; //相对定位
		width: 512upx;
		height: 794upx;
		margin: 100upx auto; //与顶部距离100upx,且居中
		margin-bottom: 0;

		.left-top-corner { //子盒子(左上角）
			position: absolute;  //绝对定位
			top: 0; 
			left: 0;
			width: 43upx;
			height: 43upx;
			border-top: 7upx solid #ED6636; //边框：尺寸 实线（虚线） 颜色
			border-left: 7upx solid #ED6636;
		}

		.right-top-corner { //子盒子(左下角）
			position: absolute;
			top: 0;
			right: 0;
			width: 43upx;
			height: 43upx;
			border-top: 7upx solid #ED6636;
			border-right: 7upx solid #ED6636;
		}

		.left-bottom-corner { //子盒子(右上角）
			position: absolute;
			bottom: 0;
			left: 0;
			width: 43upx;
			height: 43upx;
			border-bottom: 7upx solid #ED6636;
			border-left: 7upx solid #ED6636;
		}

		.right-bottom-corner { //子盒子(右上角）
			position: absolute;
			bottom: 0;
			right: 0;
			width: 43upx;
			height: 43upx;
			border-bottom: 7upx solid #ED6636;
			border-right: 7upx solid #ED6636;
		}
	}

</style>