码云 CSS 实现彩色边框效果
AI 概述
CSS3新增了box-shadow，用于设置盒子的阴影，今天玩了一下！纯 CSS 实现的彩色边框效果。
效果展示：
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewp...
CSS3新增了box-shadow，用于设置盒子的阴影，今天玩了一下！纯 CSS 实现的彩色边框效果。
效果展示：
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.one div {
width: 100px;
height: 100px;
margin: 50px auto;
background-color: rgb(245, 234, 234);
box-shadow:
10px 0 15px -2px rgb(11, 11, 235),
0 -10px 15px -2px rgb(103, 167, 8),
-10px 0 15px -2px rgb(228, 64, 4),
0 10px 15px -2px rgb(241, 7, 132);
}
div.one div:nth-of-type(1) {
border-radius: 5%;
}
div.one div:nth-of-type(2) {
border-radius: 30%;
}
div.one div:nth-of-type(3) {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="one">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
以上关于CSS 实现彩色边框效果的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » CSS 实现彩色边框效果
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » CSS 实现彩色边框效果
