纯CSS实现可自定义间距虚线边框

约定不等于承诺〃 2023-03-13 11:43 7阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			.border-wrapper {
    				position: relative;
    				margin: 100px auto;
    				width: 200px;
    				height: 50px;
    				background: #ff0000;
    				z-index: 9999;
    				border-radius: 5px;
    			}
    			
    			.border-top {
    				width: calc(100% - 10px);
    				left: 5px;
    				height: 1px;
    				background-image: linear-gradient(to right, #fff 0%, #fff 50%, transparent 50%);
    				background-size: 11px 1px;
    				background-repeat: repeat-x;
    				position: absolute;
    			}
    			
    			.border-left {
    				width: 1px;
    				left: 0;
    				top: 5px;
    				height: calc(100% - 10px);
    				background-image: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%);
    				background-size: 1px 11px;
    				background-repeat: repeat-y;
    				position: absolute;
    			}
    			
    			.border-bottom {
    				width: calc(100% - 10px);
    				left: 5px;
    				height: 1px;
    				bottom: 0;
    				background-image: linear-gradient(to right, #fff 0%, #fff 50%, transparent 50%);
    				background-size: 11px 1px;
    				background-repeat: repeat-x;
    				position: absolute;
    			}
    			
    			.border-right {
    				width: 1px;
    				right: 0;
    				top: 5px;
    				height: calc(100% - 10px);
    				background-image: linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%);
    				background-size: 1px 11px;
    				background-repeat: repeat-y;
    				position: absolute;
    			}
    			
    			.button-wrapper {
    				position: relative;
    				width: calc(100% - 2px);
    				height: calc(100% - 2px);
    				border-radius: 4px;
    				background: #ffffff;
    				top: 1px;
    				left: 1px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="border-wrapper">
    			<div class="border-top"></div>
    			<div class="border-left"></div>
    			<div class="border-bottom"></div>
    			<div class="border-right"></div>
    		    <div class="button-wrapper"></div>
    		</div>
    	</body>
    </html>

效果

![20200513111249376.png][]

改变虚线宽度可更改以下值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70][]

[20200513111249376.png]: /images/20230312/6ee02fa61b5b4d709451ca6f7b87cb87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200513111332955.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ=,size_16,color_FFFFFF,t_70