Я являюсь частью сайта, где я могу разрабатывать и продавать продукты.Они позволяют мне модернизировать веб-страницу каждого продукта, и, поскольку у меня есть несколько продуктов, я хочу использовать одну внешнюю таблицу стилей, чтобы управлять ими всеми (и в темноте, связать их).
Проблема в том, что длябезопасность сайта, область, в которой я могу кодировать, - это iframe.(Я понимаю и поддерживаю, почему они это делают.) Я сделал шаблон своего кода, используя необработанный HTML, чтобы я мог кодировать его в автономном режиме, пока он мне не понравился, а затем загрузить его напрямую и BAM, чтобы каждая страница продукта с базовым HTML выглядела правильно.
Мой код использует псевдоэлементы, чтобы расположить градиентную рамку поверх граничного div.Он выглядит замечательно (для меня) как рабочий HTML, но градиент псевдоэлемента отказывается загружаться при размещении внутри iframe.Я попытался не , используя стиль псевдоэлемента, и сделал сложенные деления, используя z-index, но я сделал это совершенно неправильно, и получился беспорядок.
Вот моя версия HTML.Как я могу получить градиент для укладки и правильного размера поверх причудливых границ?Мне все равно, , какой код сделает это.Мне просто нужно сделать это.
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 */
}
<HEAD>
<link rel="stylesheet" href="https://www.cafenocturne.com/IMVU/products/Shop_Code/ShopCSS.css">
</HEAD>
<div id="container">
<div id="header" class="border shine">
<br><img src='' alt=''>
[Header Image]<br><br>
BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH
</div>
<div id="description" class="border shine">
<br>Description of product.<br><br>
BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH
</div>
<div id="productimages" class="border shine">
<br><img src='' alt='Product Preview'>
BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH BLAHBLAH
</div>
<div id="shine">
<div id="footer" class="border shine">
<!-- <a href="https://www.imvu.com/shop/web_search.php?manufacturers_id=5315966" target="_blank">
<img src="" border="0"></a> --> [Footer Banner]<br>
</div>
</div>
</div>
Теперь градиент не отображается в моих фрагментах кода в стеке, вероятно, по той же причине, поэтому вот рабочая копия на моем собственном сервере, так что выможно увидеть, чего я пытаюсь достичь: код макета магазина