前言

html简单练习：二十行代码实现超好看唯美浪漫简约的文字边框卡片

提示：以下是本篇文章正文内容，下面案例可供参考

一、实现界面

二、代码

荧光边框.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="yingguang.css">
</head>
<body><div class="box"><div class="content"><h1>6666666</h1><p>坐着高铁看中国：百年京张线 见证复兴新征程我国提前完成一亿人口落户目标 改革进展顺利买买买！海南离岛免税购物火爆引境外消费回流世贸：中国在进出口领域为全球作出积极贡献走向星辰大海！中国空间站建造任务全力备战返程客流明显增加 7日预计发送旅客1200万人次青岛9人检测阳性 均与胸科医院高度关联央视发表海峡时</p></div></div>
</body>
</html>

yingguang.css

body{margin:0;padding:0;display: flex;/* justify-content: center;align-items: center;*/min-height:100vh;background: #060c21;font-family: Acanthus;
}
/*实现蓝绿色的*/
.box{margin: 50px;position:relative;width: 300px;height: 400px;display: flex;justify-content: center;align-items: center;background: #060c21;
}
.box:before {content: '';position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;background: #fff;z-index:-1;}
.box:after {content: '';position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;background: #fff;z-index:-1;filter:blur(40px);}
.box:before,
.box:after{background: linear-gradient(235deg,#89ff00,#060c21,#00bcd4);
}
.content{padding:20px;box-sizing:border-box;color:#fff;
}
/*实现紫粉色的*/
.box2{margin: 50px;position:relative;width: 300px;height: 400px;display: flex;justify-content: center;align-items: center;background: #060c21;
}
.box2:before {content: '';position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;background: #fff;z-index:-1;}
.box2:after {content: '';position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;background: #fff;z-index:-1;filter:blur(40px);}
.box2:before,
.box2:after{background: linear-gradient(235deg,#e37bb2,#060c21,#a70dc6);
}
.content{padding:20px;box-sizing:border-box;color:#fff;
}

总结

简单的html练习：实现超好看唯美浪漫的文字边框卡片相关推荐

别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)
别具一格,原创唯美浪漫情人节表白专辑, (复制就可用)(html5,css3,svg)表白爱心代码(1) 一. 前言回眸之间,丰盈了岁月,涟漪了思绪,轻轻落笔,不写伤痕,不写仇怨,只写岁月经历领悟后 ...
分享清新唯美浪漫中秋PPT模板
接下来小编将和大家分享得是主题为清新唯美浪漫中秋PPT模板.这份PPT模板的模板样式是以浅色调为背景颜色,模板的整体风格突显清新与唯美.下面就给大家展示该PPT模板的页面内容. 这份PPT模板是由办公 ...
【特别推荐】10款唯美浪漫的婚礼结婚纪念网站模板
互联网的重要性不言而喻,如今我们的生活已经完全离不开网络.这里给大家分享一组唯美浪漫的结婚邀请网站以及婚礼请柬网站模板,如果你也正想制作这样的网站,相信这些漂亮的网站模板能够带给你很大的帮助,让你快速 ...
别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码（4）
别具一格,独此一家,原创唯美浪漫情人节表白专辑不一样的惊喜哦~!(html5,css3,svg)表白爱心代码(复制就可用)(4) 目录款式四:时光的记忆款 1.拷贝完整源代码 2.更新时光盒所显示 ...
20X12 fcpx插件20种唯美浪漫小清新线条婚礼文字标题动画WeddingTitlesv2
20X12 fcpx插件20种唯美浪漫小清新线条婚礼文字标题动画WeddingTitlesv2 [插件介绍] 这是第七季,插件一共包含20种唯美浪漫小清新线条婚礼新郎新娘姓名日期文字标题动画,只有开 ...
别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(3)
别具一格,原创唯美浪漫情人节表白专辑, (复制就可用)(html5,css3,svg)表白爱心代码(3) 目录款式三:心形实时显示认识多长时间桃花飞舞(猫咪)款 1.拷贝完整源代码 2.拷贝完整js ...
婚纱照片视频制作软件哪个好？唯美婚礼视频制作，简单几步就搞定！
浪漫的婚礼上,在大屏幕上播放婚纱照片视频,配上动听的音乐,和吸睛的照片效果,既能让宾客看得开心,也能给婚礼现场制造更加美好的回忆.现在最流行的婚礼MV视频,就是把婚纱照片做成视频的形式.那么,婚纱照片 ...
java好听的名字_(男孩起名)李白诗中最唯美的三字名字推荐,李白诗中最唯美的三字名字取名方法 - Java伴我余生 - 宝宝起名网...
温馨提示: 本文约有1125个文字,大小约为5KB,预计阅读时间3分钟,本文共 3张图片. 本文李白诗中最唯美的三字名字推荐,李白诗中最唯美的三字名字取名方法,请您欣赏.宝宝起名网众多优秀文章,如果想 ...
【VC++游戏开发#六】2D篇 —— 粒子系统(一)：浪漫唯美的场景之雪花飞舞
本文由BlueCoder编写转载请说明出处: http://blog.csdn.net/crocodile__/article/details/16887511 我的邮箱:bluecoder@y ...
简单的php引导页面设计,PS简单制作唯美朦胧柔美的渐变APP引导页
今天小编为大家分享PS简单制作唯美朦胧柔美的渐变APP引导页方法,教程很不错,难度不是很大,推荐到脚本之家,大家快快来学习吧! 此适合和对颜色研究不深,又急需应用的朋友.小编良心保证,再零基础的同学也 ...

简单的html练习：实现超好看唯美浪漫的文字边框卡片

前言

html简单练习：二十行代码实现超好看唯美浪漫简约的文字边框卡片

一、实现界面

二、代码

总结

简单的html练习：实现超好看唯美浪漫的文字边框卡片相关推荐

最新文章

热门文章