css box-shadow不起作用
#1348
-
|
我在我的博客上添加了一些自己的代码，企图通过它来创建一个个的框，点击这个‘’框“就可以去到指定的链接. 我的页面：https://charle00001.github.io/paperfile/other-and-tools/ 这是我的markdown页面，里面可以看到我使用了shortcode来运行代码： ---
title: "其他&工具"
url: "paperfile/other-and-tools/"
draft: false
comments: false
searchHidden: true
---
{{<raw>}}
<!DOCTYPE html>
<html>
<head>
<style>
/* 设置外部容器的样式，用于包含多个框 */
.container {
display: flex; /* 使用弹性布局 */
flex-wrap: wrap; /* 允许换行 */
gap: 10px; /* 设置框之间的间距 */
}
/* 每个框的样式 */
.box {
width: 220px; /* 设置框的宽度 */
height: 175px; /* 设置框的高度 */
/**/
position: relative; /* 设置相对定位 */
box-shadow:
0 0 0 1.5px #000,
0 0 0 3px #fff,
0 0 0 4.5px #000,
0 0 0 6px #fff;
/**/
border-radius: 20px; /* 设置圆角边框 */
margin: 6px; /* 设置框的外边距 */
display: inline-block; /* 设置框为内联块元素 */
cursor: pointer; /* 设置鼠标指针为手形 */
text-align: center; /* 设置文本居中对齐 */
color: ; /* 设置文本颜色 */
padding: 15px; /* 设置框的内边距 */
transition: transform 0.3s; /* 添加平滑的变换效果 */
background-color: transparent; /* 设置透明的背景颜色 */
}
/* 鼠标悬停时的样式 */
.box:hover {
transform: scale(1.25); /* 缩放效果 */
}
/* 清除标题和链接的默认间距 */
h2, p {
margin: 0;
}
/* 链接样式，去除下划线 */
a {
text-decoration: none;
}
/* 设置主标题字体大小 */
.main-title {
font-size: 20px;
}
/* 设置副标题字体大小 */
.sub-title {
font-size: 15px;
}
</style>
</head>
<body>
<div class="container" id="boxContainer">
</div>
<script>
var container = document.getElementById('boxContainer');
var textArray = [
"分类|查看所有分类", "RSS订阅|获取最新文章更新", "破网软件获取中心|下载最新破网软件", "游戏|畅玩各种游戏", "base64编码/解码|加密和解密工具", "亲戚关系计算器|作者Passer-By", "亲戚关系计算器|手机版，作者Passer-By", "加密js|加密和解密JS代码", "浏览器检测|检测浏览器信息", "测试主标题|测试副标题", "下载“破坏网络的软件”|开玩笑的，不过可以去看看", "HTML、JavaScript、CSS代码注释去除器|一键批量去除所有注释，肥肠好用"
];
var linkArray = [
"/categories/", "/index.xml", "/paperfile/get-vpn/", "/paperfile/games_about/", "/paperfile/tools/base64/", "/paperfile/tools/relationship/", "/paperfile/tools/relationship/vue", "/paperfile/tools/hiddencode/", "/paperfile/tools/browser/", "https://example.com/测试", "/paperfile/get-network-breaking-software/"
];
// 生成随机颜色
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// 遍历数组，生成框（如果要增加框的数量，就必须添加上面的标题和链接，然后更改下面for语句里要生成框的数量）
for (var i = 0; i < 12; i++) {
var parts = textArray[i].split("|"); // 使用竖线分隔主标题和副标题
var box = document.createElement('a'); // 创建一个链接元素
box.className = 'box'; // 设置框的类名
box.href = linkArray[i]; // 设置链接的目标地址
// 创建主标题元素
var title = document.createElement('div');
title.className = 'main-title'; // 设置类名
title.innerText = parts[0]; // 设置文本内容
// 创建副标题元素
var subtitle = document.createElement('div');
subtitle.className = 'sub-title'; // 设置类名
subtitle.innerText = parts[1]; // 设置文本内容
// 创建包含标题和副标题的容器
var flexContainer = document.createElement('div');
flexContainer.style.display = 'flex'; // 使用弹性布局
flexContainer.style.flexDirection = 'column'; // 垂直排列
flexContainer.style.alignItems = 'center'; // 居中对齐
flexContainer.appendChild(title);
flexContainer.appendChild(subtitle);
// 将标题和副标题容器添加到框中
box.appendChild(flexContainer);
// 将框添加到外部容器
container.appendChild(box);
// 添加鼠标悬停事件监听器，以实现随机颜色效果
box.addEventListener('mouseenter', function() {
this.style.backgroundColor = getRandomColor();
});
// 添加鼠标离开事件监听器，以恢复透明背景
box.addEventListener('mouseleave', function() {
this.style.backgroundColor = 'transparent';
});
}
</script>
</body>
</html>
{{</raw>}} |
Beta Was this translation helpful? Give feedback.
Answered by
R917C
Dec 2, 2023
Replies: 1 comment
-
|
问题已解决，确实是主题的锅:(。不过当我在.box前面加上更具体的#boxContainer时，box-shadow属性正常显示。 |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
R917C
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
问题已解决，确实是主题的锅:(。不过当我在.box前面加上更具体的#boxContainer时，box-shadow属性正常显示。