CSS
.marker {
width: 200px;
height: 25px;
margin: 10px auto;
}
.cap {
width: 60px;
height: 25px;
}
.sleeve {
width: 110px;
height: 25px;
background-color: rgba(255, 255, 255, 0.5);
border-left: 10px double rgba(0, 0, 0, 0.75);
}
.cap, .sleeve {
display: inline-block;
}
.red {
background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
}
.green {
background: linear-gradient(#55680D, #71F53E, #116C31);
box-shadow: 0 0 20px 0 #3B7E20CC;
}
.blue {
background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
box-shadow: 0 0 20px 0 blue;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colored Markers</title>
<link rel="stylesheet" href="./my web.css">
</head>
<body>
<h1>CSS Color Markers</h1>
<div class="container">
<div class="marker red">
<div class="cap"></div>
<div class="sleeve"></div>
</div>
<div class="marker green">
<div class="cap"></div>
<div class="sleeve"></div>
</div>
<div class="marker blue">
<div class="cap"></div>
<div class="sleeve"></div>
</div>
</div>
</body>
</html>
效果图
知识点:
一、border-left:可以设置左边框的各属性
border-left:border-left-width border-left-style border-left-color;
border-left-width:左边框的宽度,可以是像素值、百分比或者预定义的值(如:thin、medium、thick)
border-left-style:左边框的样式,可以是solid(实线)、dashed(虚线)、dotted(点线)等。
border-left-color:可以是颜色名称、十六进制、RGB、rgba。
二、box-shadow:此属性是用于在元素的周围创建阴影效果
box-shadow:offsetX offetY blurRadius spreadRadius color
eg:box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
offsetX:水平偏移量,即阴影相对于元素的水平位置。可以是正值(阴影向右偏移)或负值(阴影向左平移)
offsetY:水平偏移量,即阴影相对于元素的垂直位置。可以是正值(阴影向下偏移)或负值(阴影向上平移)
blurRadius:模糊半径,控制阴影的模糊程度。值越大,阴影越模糊。0 表示无模糊,大于 0 的值表示模糊半径。
spreadradius:扩散半径,控制阴影的尺寸。正值回扩展阴影,负值回收缩阴影。默认值为0,即阴影与元素相同大小
三、linear-gradient:是用于渐变背景的函数
linear-gradient(direction, color-stop1, color-stop2, ...);
-
direction(方向):指定渐变的方向,可以是角度值(以度为单位)或者关键字。
- 角度值:表示渐变的方向,0 度是向右,90 度是向上,以此类推。
- 关键字:
to top
(从下到上)、to right
(从左到右)等。
-
color-stop(颜色停止点):定义渐变的颜色和位置。
- 可以是颜色值,如
red
、#ff0000
、rgba(255, 0, 0, 0.5)
。 - 也可以是颜色值后跟着一个表示位置的百分比或长度值,如
red 20%
表示在渐变的 20% 处为红色。
- 可以是颜色值,如