我的CCS代码是
.isotope {
box-shadow: 0px 8px 15px;
}
我也试过
#content .isotope {
box-shadow: 0px 8px 15px;
}
和
.portfolio-wrapper .isotope {
box-shadow: 0px 8px 15px;
}
但这些不会显示方框阴影。
问题是我只想将此框阴影应用于一个div
。该元素是使用短代码的投资组合,位于几页上。我只想在主页上的投资组合中显示框阴影。我正在努力将它完全应用到我想要的地方,它到处都是它!
我对HTML不是很好,发帖可能很荒谬我真的不知道,但万一它可以帮助你帮助我......
<div id="content" class="portfolio-four">
<div class="portfolio-wrapper isotope" style="position: relative; overflow: hidden; height: 232px;">
<div class="portfolio-item isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px);">
<div class="project-feed clearfix">
<div class="ch-item portfolio-4">
<div class="ch-info portfolio-4">
<div class="ch-info-front4 ">
<img src="http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/aqua-sana-7-220x161.jpg">
</div>
<div class="ch-info-back4 portfolio-4" style="background-image:url(http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/aqua-sana-7-220x161.jpg);">
<div class="info"><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=aqua-sana"><i class="icon-search"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio_details">
<h3><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=aqua-sana">Aqua Sana</a></h3>
<div class="tags"><i class="icon-tag"></i>
</div>
</div>
</div>
<div class="portfolio-item clients projects isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(228px, 0px, 0px);">
<div class="project-feed clearfix">
<div class="ch-item portfolio-4">
<div class="ch-info portfolio-4">
<div class="ch-info-front4 ">
<img src="http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/photo-1-32-220x161.jpg">
</div>
<div class="ch-info-back4 portfolio-4" style="background-image:url(http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/photo-1-32-220x161.jpg);">
<div class="info"><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=center-parcs-2"><i class="icon-search"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio_details">
<h3><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=center-parcs-2">Center Parcs</a></h3>
<div class="tags"><i class="icon-tag"></i><a href="http://tandc.puerteaspecialists.co.uk/?portfolio_category=clients" rel="tag">clients</a>, <a href="http://tandc.puerteaspecialists.co.uk/?portfolio_category=projects" rel="tag">Projects</a>
</div>
</div>
</div>
<div class="portfolio-item bespoke isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(456px, 0px, 0px);">
<div class="project-feed clearfix">
<div class="ch-item portfolio-4">
<div class="ch-info portfolio-4">
<div class="ch-info-front4 ">
<img src="http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/51-220x161.jpg">
</div>
<div class="ch-info-back4 portfolio-4" style="background-image:url(http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/51-220x161.jpg);">
<div class="info"><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=bespoke"><i class="icon-search"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio_details">
<h3><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=bespoke">Bespoke</a></h3>
<div class="tags"><i class="icon-tag"></i><a href="http://tandc.puerteaspecialists.co.uk/?portfolio_category=bespoke" rel="tag">Bespoke</a>
</div>
</div>
</div>
<div class="portfolio-item isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(684px, 0px, 0px);">
<div class="project-feed clearfix">
<div class="ch-item portfolio-4">
<div class="ch-info portfolio-4">
<div class="ch-info-front4 ">
<img src="http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/photo-1-26-220x161.jpg">
</div>
<div class="ch-info-back4 portfolio-4" style="background-image:url(http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/photo-1-26-220x161.jpg);">
<div class="info"><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=shop-and-bar-fitting"><i class="icon-search"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio_details">
<h3><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=shop-and-bar-fitting">Shop and Bar Fitting</a></h3>
<div class="tags"><i class="icon-tag"></i>
</div>
</div>
</div>
<div class="portfolio-item bedrooms isotope-item" style="position: absolute; left: 0px; top: 0px; transform: translate3d(912px, 0px, 0px);">
<div class="project-feed clearfix">
<div class="ch-item portfolio-4">
<div class="ch-info portfolio-4">
<div class="ch-info-front4 ">
<img src="http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/photo-1-15-220x161.jpg">
</div>
<div class="ch-info-back4 portfolio-4" style="background-image:url(http://tandc.puerteaspecialists.co.uk/wp-content/uploads/2015/01/photo-1-15-220x161.jpg);">
<div class="info"><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=bedrooms"><i class="icon-search"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio_details">
<h3><a href="http://tandc.puerteaspecialists.co.uk/?creativo_portfolio=bedrooms">Bedrooms</a></h3>
<div class="tags"><i class="icon-tag"></i><a href="http://tandc.puerteaspecialists.co.uk/?portfolio_category=bedrooms" rel="tag">Bedrooms</a>
</div>
</div>
</div>
</div>
</div>
&#13;
答案 0 :(得分:0)
只需将您想要投影的<div>
放在唯一标识符上即可。
类的目的是提供一个标识符,以便在多个元素之间应用样式。 id
的目的是提供唯一标识符,以便将样式应用于特定元素。
因此,直截了当的选择是为您尝试设置的<div>
提供唯一ID。
<div id="front-page" class="portfolio-wrapper isotope"> ....CODE....</div>
将以下内容添加到CSS中:
#front-page .isotope {
box-shadow: 0px 8px 15px;
}
有关选择器的基本概述,请参阅http://www.w3schools.com/css/css_selectors.asp。