如何解决如何在卡片CSS的一角添加颜色?
我有一个如下的基本引导卡示例
我想并排绘制蓝色和绿色,但只能像下面这样绘制蓝色
当我尝试同时提供这两个课程时,它不起作用。一个总是被覆盖。
<div class="card blue green">
<div class="card-body">Basic card</div>
</div>
如何并排添加它们?似乎:before
并没有帮助。
下面提供了代码段
.green:before{border-left: 5px solid #73BD07;}
.blue:before{border-left: 5px solid #4D33DC;}
.card:before{content: '';position: absolute;top: 0;left: 0;height: 100%;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Card</h2>
<div class="card blue green">
<div class="card-body">Basic card</div>
</div>
</div>
</body>
</html>
解决方法
问题在于您的green:before
被card:before
覆盖,因为这些类位于同一div
元素上。您可以改为使用.green:after
来避免这种情况。
.green:after{
content: '';
border-left: 5px solid #73BD07;
position: absolute;
left: 5px;
top: 0;
height: 100%;
}
.blue:before{border-left: 5px solid #4D33DC;}
.card:before{content: '';position: absolute;top: 0;left: 0;height: 100%;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Card</h2>
<div class="card blue green">
<div class="card-body">Basic card</div>
</div>
</div>
</body>
</html>
,
添加绿色边框::before
伪元素。
.green{position:relative;}
.green::before{
border-left: 5px solid #73BD07;
position:absolute;
content:'';
top:0;left:0;bottom:0;
}
.blue{border-left: 5px solid #4D33DC !important;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Card</h2>
<div class="card blue green">
<div class="card-body">Basic card</div>
</div>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。