Question

我是一个网站的一部分，可以设计和销售产品。他们让我喜欢每种产品的网页，并且因为我有多种产品，所以我只想使用一个外部样式表来统治所有产品（在黑暗中将它们绑定）。

问题是，为了网站的安全，我可以在其中编码的区域是iframe。（我知道并支持他们这样做的原因。）我使用原始HTML制作了代码模板，因此可以离线对其进行编码，直到喜欢为止，然后直接将其上传到BAM中，每个带有基础HTML的产品页面看起来都可以正确匹配

我的代码使用伪元素将渐变框放置在边框div的顶部。在我看来， great （对我来说）是可以正常工作的HTML，但是当放置在iframe中时，伪元素渐变拒绝加载。我尝试使用伪元素样式 not ，并使用z-index进行了堆叠div，但是我做错了，结果一团糟。

这是我的HTML版本。如何获取渐变并在花式边框div上方正确设置大小？我不在乎什么代码可以完成此任务。我只需要做到这一点。

Thread.isMainThread

body {
	background: url('BlackLeather.jpg') repeat; background-color: #000000;
	color: #9200b0;
}
#container {
	text-align:center;
	width:100%;
	position: relative;
}
#footer {
		text-align:center;
}
.border {
	border: 10px solid;
	position: relative;
	border-image: url('TigerPurpleSeamless225.jpg') 30 round;
	margin: 10px 20px 10px 20px;
	padding: 20px 5px 20px 5px;
}

.shine::before {
	content: "";
	position: absolute;
	top: -9; left: -9; bottom: -9; right: -9;
	border-color: rgba(0, 0, 0, 0.6);
    border-image: none;
    border-style: solid;
    border-width: 1px;
  
	box-shadow:
		0 1px 0 0 rgba(255, 255, 255, 0.4) inset,
		0 2px 6px rgba(0, 0, 0, 0.5),
		0 10px rgba(0, 0, 0, 0.05) inset;
		
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;

	background: linear-gradient(to bottom,  rgba(96,103,104,0.3) 0%,rgba(187,187,187,0.3) 3%,rgba(187,187,187,0.3) 27%,rgba(0,0,0,0.3) 28%,rgba(0,0,0,0.3) 60%,rgba(0,0,0,0.3) 73%,rgba(75,80,81,0.3) 88%,rgba(0,0,0,0.3) 97%,rgba(0,0,0,0.3) 100%); /* W3C */
}

现在，由于相同的原因，梯度没有显示在Stack上的代码片段中，因此这是我自己服务器上的工作副本，因此您可以看到我正在尝试实现的目标：Shop Layout Code

iframe中伪元素的替代

0 个答案: