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

详见个人博客

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>

.BoxWrap{width: 1000px;height: 500px;position: relative;}.horn{position: absolute;width: 100%;height: 100%;border:1px solid #00d3e7;margin: 100px;}.horn>div{width: 10px;height: 10px;position:absolute;}.horn .lt{border-top: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;top: -3px;}.horn .rt{border-top: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;top: -3px;}.horn .rb{border-bottom:3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;bottom: -3px;}.horn .lb{border-bottom:3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;bottom: -3px;}

3、css实现四角边框，四角为正方形，颜色渐变

代码如下：

<div class="BoxWrap"><div class="horn"><div class="lt"></div><div class="rt"></div><div class="rb"></div><div class="lb"></div></div>

 .BoxWrap {width: 1000px;height: 500px;position: relative;}.horn {position: absolute;width: 100%;height: 100%;border: 1.5px solid #00d3e7;margin: 100px;border-image: -webkit-linear-gradient(rgb(85, 87, 231), rgb(149, 228, 241)) 20 20;border-image: -moz-linear-gradient(rgb(85, 87, 231), rgb(149, 228, 241)) 20 20;border-image: -o-linear-gradient(rgb(85, 87, 231), rgb(149, 228, 241)) 20 20;border-image: linear-gradient(rgb(85, 87, 231), rgb(149, 228, 241)) 20 20;}.horn>div {width: 10px;height: 10px;position: absolute;/* background-color: #00d3e7 */}.horn .lt {left: -10px;top: -10px;background-color: rgb(85, 87, 231);}.horn .rt {right: -10px;top: -10px;background-color: rgb(85, 87, 231);}.horn .rb {right: -10px;bottom: -10px;background-color: rgb(149, 228, 241);}.horn .lb {left: -10px;bottom: -10px;background-color: rgb(149, 228, 241);}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- <link rel="stylesheet" href="css/style.css"> --><style></style>
</head>
<body><div class="BoxWrap">//边框div<div class="horn">//四个角上正方形div<div class="lt"></div><div class="rt"></div><div class="rb"></div><div class="lb"></div></div></div>
</body>
</html>

4、css无角渐变边框

代码如下：

<div class="boxWrap"></div>

.boxWrap {width: 1000px;height: 500px;margin: 100px;background: radial-gradient(circle at center center, rgba(25, 25, 112, 0), rgba(25, 25, 112, 0)),linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right top,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) left bottom,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,linear-gradient(rgba(179, 224, 255, 0.62), rgba(179, 224, 255, 0.62)) right bottom,linear-gradient(rgba(56, 144, 184, 0.60), rgba(56, 144, 184, 0.60)) top,linear-gradient(rgba(26, 87, 130, 0.60), rgba(26, 87, 130, 0.60)) bottom,linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) left,linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) right;background-repeat: no-repeat;background-position: 1px 1px, 0px 0px, 0px 0px, 0px 100%, 0px 100%, 100% 0px, 100% 0px, 100% 100%, 100% 100%, 0px 0px, 0px 100%, 0px 100%, 100% 100%;background-size: calc(100% - 2px) calc(100% - 2px), 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%;}

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

多功能用途 Gooey Effects 7种炫酷HTML5 SVG液态水滴融合动画特效
查看原文查看在线演示Demo和更多原文内容教程: 7种炫酷HTML5 SVG液态水滴融合动画特效这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效.这些SVG动画特效使一些HTML ...
html5 loading游戏,12种炫酷html5 svg加载loading动画特效
12种炫酷html5 svg加载loading动画特效刘振兴代码分享 2015年11月23日 14182 3条评论这是一款使用HTML5 SVG技术制作的12种炫酷html5 svg加载load ...
html加载特效大全,10种炫酷的CSS3 loading加载动画特效
这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...
html5融合效果,7种炫酷HTML5 SVG液态水滴融合动画特效
这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效.这些SVG动画特效使一些HTML元素,如菜单.分页按钮.APP.选择框等元素的过渡动画像几粒水滴一样融合分解,效果非常的酷. SVG ...
css实现一个炫酷的渐变色边框
目录前言目标: 失败: 准备解决方案: 第一种:父级设置渐变色,子项设置阴影第二种:用伪类作为子元素第三种:用伪类作为父元素前言
CSS实现8种炫酷按钮
今天给大家分享8种炫酷按钮的CSS实现. 1. 3D按钮1 现在的主流是扁平化的设计,拟物化的设计比较少见了,所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左.下两个 ...
button按钮的属性设置_web前端入门到实战：CSS实现8种炫酷按钮
今天给大家分享8种炫酷按钮的CSS实现. 1. 3D按钮1 现在的主流是扁平化的设计,拟物化的设计比较少见了,所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左.下两个 ...
炫酷科技感黑客感瀑布流html+js+css代码
效果如下代码如下 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" ...
使用vue3+element-plus+particles实现炫酷(粒子背景)登陆界面
效果图如下: 撸代码前准备(从无到有): 1.导入element-plus: # yarn yarn add element-plus # npm npm install element-plus - ...

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

详见个人博客

1、css四角背景无边边框

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

3、css实现四角边框，四角为正方形，颜色渐变

4、css无角渐变边框

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

最新文章

热门文章