注释
@font-face {
font-family: RajdhaniBold;
src: url(Rajdhani.ttf);
}
#killfeed-container {
margin-top: 2vh;
margin-right: 35vh;
width: 49vw;
height: 90vh;
float: right;
overflow-y: hidden;
}
.kill-line {
float: right;
width: 100%;
margin-bottom: 0.35vh;
animation-fill-mode: forwards;
}
.kill-container {
height: 3vh;
float: right;
display:inline-flex;
align-items: center;
justify-content: center;
}
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.black-border {
border: 0.15em solid rgba(0, 0, 0, 0.01);
border-radius: 0.25em;
}
.red-border {
border: 0.18em solid rgb(190, 16, 21);
border-radius: 0.3em;
}
.black-background {
background-color: rgba(0, 0, 0, 0.5);
}
.red-background {
background-color: rgba(170, 15, 20, 0.6);
}
.text {
padding: 0;
text-align: center;
margin: 0;
color: rgb(255, 255, 255);
font-family: 'RajdhaniBold', Arial, Helvetica, sans-serif;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.5);
}
.name {
padding-left: 0.85vh;
padding-right: 0.85vh;
font-size: 1.35em;
}
.tag {
padding-left: 0.85vh;
margin-right: -0.30vh;
font-size: 1.20em;
}
.message {
padding-right: 0.85vh;
font-size: 1.35em;
}
.dist {
padding-left: -0.85vh;
padding-right: 0.85vh;
font-size: 1.20em;
white-space: nowrap;
}
.none {
padding: 0;
padding-right: 0.85vh;
}
.weapon-image {
height: 2.6vh;
padding-left: 0.85vh;
}
.icon-image {
height: 2.6vh;
padding: 0;
padding-left: 0.85vh;
}
@font-face {
font-family: RajdhaniBold; /* 定义字体家族为RajdhaniBold */
src: url(Rajdhani.ttf); /* 指定字体文件的路径 */
}
#killfeed-container {
margin-top: 2vh; /* 向上外边距设为2vh */
margin-right: 35vh; /* 向右外边距设为35vh */
width: 49vw; /* 宽度设为49vw */
height: 90vh; /* 高度设为90vh */
float: right; /* 右浮动 */
overflow-y: hidden; /* 隐藏垂直方向的溢出内容 */
}
.kill-line {
float: right; /* 右浮动 */
width: 100%; /* 宽度设为100% */
margin-bottom: 0.35vh; /* 下外边距设为0.35vh */
animation-fill-mode: forwards; /* 动画填充方式为前往 */
}
.kill-container {
height: 3vh; /* 高度设为3vh */
float: right; /* 右浮动 */
display: inline-flex; /* 使用内联弹性盒模型 */
align-items: center; /* 垂直方向居中对齐 */
justify-content: center; /* 水平方向居中对齐 */
}
.line-clamp {
display: -webkit-box; /* 旧版Safari及Chrome支持的盒模型 */
-webkit-line-clamp: 1; /* 限制行数为1 */
-webkit-box-orient: vertical; /* 盒模型方向为竖向 */
overflow: hidden; /* 隐藏超出部分 */
}
.black-border {
border: 0.15em solid rgba(0, 0, 0, 0.01); /* 黑色边框，透明度为0.01 */
border-radius: 0.25em; /* 圆角半径设为0.25em */
}
.red-border {
border: 0.18em solid rgb(190, 16, 21); /* 红色边框 */
border-radius: 0.3em; /* 圆角半径设为0.3em */
}
.black-background {
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
}
.red-background {
background-color: rgba(170, 15, 20, 0.6); /* 半透明红色背景 */
}
.text {
padding: 0; /* 内边距设为0 */
text-align: center; /* 文字居中对齐 */
margin: 0; /* 外边距设为0 */
color: rgb(255, 255, 255); /* 文本颜色为白色 */
font-family: 'RajdhaniBold', Arial, Helvetica, sans-serif; /* 指定字体 */
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5), /* 文字阴影效果 */
1px -1px 0 rgba(0, 0, 0, 0.5),
-1px 1px 0 rgba(0, 0, 0, 0.5),
1px 1px 0 rgba(0, 0, 0, 0.5);
}
.name {
padding-left: 0.85vh; /* 左内边距设为0.85vh */
padding-right: 0.85vh; /* 右内边距设为0.85vh */
font-size: 1.35em; /* 字体大小设为1.35em */
}
.tag {
padding-left: 0.85vh; /* 左内边距设为0.85vh */
margin-right: -0.30vh; /* 右外边距设为-0.30vh */
font-size: 1.20em; /* 字体大小设为1.20em */
}
.message {
padding-right: 0.85vh; /* 右内边距设为0.85vh */
font-size: 1.35em; /* 字体大小设为1.35em */
}
.dist {
padding-left: -0.85vh; /* 左内边距设为-0.85vh */
padding-right: 0.85vh; /* 右内边距设为0.85vh */
font-size: 1.20em; /* 字体大小设为1.20em */
white-space: nowrap; /* 不换行 */
}
.none {
padding: 0; /* 内边距设为0 */
padding-right: 0.85vh; /* 右内边距设为0.85vh */
}
.weapon-image {
height: 2.6vh; /* 高度设为2.6vh */
padding-left: 0.85vh; /* 左内边距设为0.85vh */
}
.icon-image {
height: 2.6vh; /* 高度设为2.6vh */
padding: 0; /* 内边距设为0 */
padding-left: 0.85vh; /* 左内边距设为0.85vh */
}
以上是CSS代码的详细注释，每一项的含义和作用都已说明。希望对你有帮助！
页:
[1]