CSS科技感四角边框

实现效果：使用before和after就可以实现，代码量不多，长度颜色都可以自己调整

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}html,body{width:100%;height:100%;background:#040d32;}.border-box{position: relative;margin:300px auto;width:400px;height:300px;background: rgba(1, 19, 67, 0.8);border: 2px solid #00a1ff;border-radius: 8px;}.border-box::before {position: absolute;top: -2px;bottom: -2px;left: 30px;width: calc(100% - 60px);content: "";border-top: 2px solid #016886;border-bottom: 2px solid #016886;z-index: 0;}.border-box::after {position: absolute;top: 30px;right: -2px;left: -2px;height: calc(100% - 60px);content: "";border-right: 2px solid #016886;border-left: 2px solid #016886;z-index: 0;}.border-box p{line-height:100px;text-align: center;color:#00a1ff;}</style>
</head>
<body>
<div class="border-box"><p>css实现科技感边框</p>
</div>
</body>
</html>

CSS科技感四角边框相关推荐

html css 科技感异形边框,CSS边框外的小三角形+阴影效果的实现。
...虽然是一个很小的问题,但其实还是挺实用的. 实现一个边框外的角. 用纯CSS来写. 一开始实现的效果是这个样子的. 但是这个效果没有办法给他附带阴影,所以换了一种写法.实现成了这个样子想要实现 ...
CSS实战---高科技感数据看板（管理层决策大屏演示）
数据在各种屏幕上的显示,根据岗位的不同,用途也是不一样的,现在比较流行的是大.中.小屏联动的数字化作战体系建设,大屏用于管理决策,中屏用于生产调度,小屏用于作业执行.小屏一般是手机或平板,中屏一般是电 ...
使用css给div添加四角边框的方法
使用css给div添加四角边框的方法 div添加四角边框,一般写法,我们会在四角分别放一个小方块设置边框,来实现效果,但当我们使用vue,或者需要封装称组件时,例如大屏的展示,如果将边框也封单独的组件 ...
HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板
科幻后台登录界面html模板原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
炫酷科技感黑客感瀑布流html+js+css代码
效果如下代码如下 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" ...
游戏UI设计干货：怎么让游戏界面更具科技感？
说到科技风,大家都会想到或者感觉到的是未来感,高科技的产物风格.那么大家可以一起想一下,在我们的身边有哪些是让你觉得有未来感.科技感的设计. 星球大战系列.科幻大片.液晶仪表盘.多媒体.VR AR.. ...
2021年第一份可视化模板教程，手把手教你做出黑科技感的大屏
讲到可视化大屏展示,终于可以轮到我上场了! ps:关于如何选择大屏制作工具,我之前在文章里讲过了,大家可以参考不用写代码的可视化大屏,一口气把工具和方法都教给你其实一般大屏都能用代码开发或现成的可视 ...
更具科技感的中塔机箱，模块设计兼容性强，鑫谷昆仑御风机箱上手
大家装机的时候应该都接触过鑫谷的机箱和散热器外设,作为一家有年头的外设品牌,这两年鑫谷推陈出新,像是在电源方面,就有不少很受欢迎的产品,像是昆仑系列等,前端鑫谷在昆仑系列中带来了一款设计新颖的机箱,最 ...
ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题思路问题:首先,li 浮动后,添加边框,则中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...

CSS科技感四角边框

CSS科技感四角边框相关推荐

最新文章

热门文章