css四种炫酷科技背景边框，颜色渐变，四角特效

最新推荐文章于 2024-09-30 16:27:26 发布

小恶魔O

最新推荐文章于 2024-09-30 16:27:26 发布

阅读量7.5k

点赞数 6

分类专栏： CSS 文章标签： css 边框

本文链接：https://blog.csdn.net/qq_37777208/article/details/101216291

版权

本文介绍了使用CSS实现四种炫酷的科技风格背景边框效果，包括四角无边边框、蓝色科技边框、四角正方形颜色渐变边框以及无角渐变边框，通过具体的代码示例详细展示了实现方法。

摘要由CSDN通过智能技术生成

详见个人博客

1、css四角背景无边边框

在这里插入图片描述
代码如下：

<div class="BoxWrap">
  <div class="horn"></div>  
</div>

.horn{
   
    width: 1000px;
    height: 500px;
    margin: 100px;
    background: linear-gradient(#00faff, #00faff) left top,
		linear-gradient(#00faff, #00faff) left top,
		linear-gradient(#00faff, #00faff) right top,
		linear-gradient(#00faff, #00faff) right top,
		linear-gradient(#00faff, #00faff) left bottom,
		linear-gradient(#00faff, #00faff) left bottom,
		linear-gradient(#00faff, #00faff) right bottom,
		linear-gradient(#00faff, #00faff) right bottom;
	background-repeat: no-repeat;
  background-size: 5px 20px, 20px 5px;
}

2、css四角蓝色边框，科技蓝

在这里插入图片描述
代码如下：

<div class="BoxWrap">
    <div class="horn">
    //四个div分别为四个角上的div
       <div class="lt"></div>
       <div class="rt"></div>
       <div class="rb"></div>
       <div class="lb"></div>
    </div>