css实现盒子的四个角高亮边框显示

Posted 尔嵘

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css实现盒子的四个角高亮边框显示相关的知识,希望对你有一定的参考价值。

效果:

 

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			
			
			html,body 
				line-height: 1.15;
				text-align: center;
			
			
			.container 
				position: relative;
				width: 300px;
				height: 180px;
				line-height: 180px;
				margin: 10px;
				background-color: ;
				border: 1px solid rgba(25, 186, 139, 0.17);
				background-color: yellow;
			
			
			.container::before 
				position: absolute;
				top: 0;
				left: 0;
				width: 10px;
				height: 10px;
				border-left: 2px solid #02A6B5;
				border-top: 2px solid #02A6B5;
				content: "";
			
			
			.container::after 
				position: absolute;
				top: 0;
				right: 0;
				width: 10px;
				height: 10px;
				border-right: 2px solid #02A6B5;
				border-top: 2px solid #02A6B5;
				content: "";
			
			
			#toral
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
			
			
			#toral::before
				position: absolute;
				bottom: 0;
				left: 0;
				width: 10px;
				height: 10px;
				border-left: 2px solid #02A6B5;
				border-bottom: 2px solid #02A6B5;
				content: "";
			
			#toral::after
				position: absolute;
				bottom: 0;
				right: 0;
				width: 10px;
				height: 10px;
				border-right: 2px solid #02A6B5;
				border-bottom: 2px solid #02A6B5;
				content: "";
			
		</style>
	</head>
	<body>
		<div class="container">
			<div id="toral">
				华诚荣邦
			</div>
		</div>
	</body>
</html>

以上是关于css实现盒子的四个角高亮边框显示的主要内容,如果未能解决你的问题,请参考以下文章

CSS高级篇——圆角

CSS高级篇——圆角

CSS矩形盒子的四个边界

CSS圆角边框

[css 揭秘]:CSS揭秘 技巧:边框内圆角

css圆角矩形的实现有多种方法,本例的方法是根据四个角的位置,将矩形横向上分为上