Question

我有一个用于jquery选项卡的tabspanel内容容器，我正在尝试使用伪元素应用高级box-shadow。但是，伪元素由于某种原因没有显示出来。

CSS

#about-us .ui-tabs .ui-tabs-panel {
  display: table;
  height: 140px;
  padding: 20px 40px;
  margin: 0px 30px 80px 30px;
  background: #5643ce;
  border-radius: 5px;
  color: #FFF;
  overflow: hidden;
}
#about-us .ui-tabs .ui-tabs-panel:before {
  content: "";
  display: inline-block;
  top: 52px;
  left: 5px;
  transform: rotate(-5deg);
  box-shadow: 7px 6px 15px #333;
}
#about-us .ui-tabs .ui-tabs-panel:after {
  content: "";
  display: inline-block;
  top: 52px;
  right: 5px;
  transform: rotate(5deg);
  box-shadow: -7px 6px 15px #333;
}

JQ

$(document).ready(function() {
$( "#about-us .tab.inner" ).parent().addClass( "tabs-container" );
$( "#tabs" ).tabs({
  event: "mouseover"
});
$('#tabs a, kill-a-action').click(function(e){
 e.preventDefault();
  return false;
});
$(window).resize(function() {
if ($(window).width() < 768) {
} else {
}
}).resize();
$("#select-loader").fadeOut();
setTimeout(function() {
    $("#tabs-wrapper").fadeIn();
}, 1000);
});

不知道问题可能是什么 - 正常的盒子阴影工作正常。感谢您的任何见解。

Answer 1

我认为你应该将伪元素定义为block而不是inline-block s，并给它们width和height，因为否则它们将保持为＆＃34;大＆＃34;作为他们的内容，即"" ..

Answer 2

你需要给你的假元素一些尺寸（高度和宽度）让它们出现;否则它们只适合内容，在你的情况下是空白的。我怀疑，因为看起来你正在使用它们来创建框架效果，你还需要绝对定位它们，以便它们不会“推”你的内容。

最后，你要注意不要因为容器上的“溢出隐藏”而最终隐藏它们......我不确定你正在寻找什么样的效果，但是要修补它，我最终得到了这样的东西：

 SELECT /*Answers and no depends*/ p.paper_id AS p_pid,
  a.paper_id AS a_pid,
  a.question_id AS a_qid,
  a.answer_val AS a_val,
  qd.question_id AS qd_qid,
  qd.depends_question_id AS qd_dqid,
  qd.depends_answer_val AS qd_val,
  q.type_id AS q_type
 FROM papers p
 JOIN answers a 
    ON a.paper_id = p.paper_id
 LEFT OUTER JOIN question_depends qd 
    ON  a.question_id = qd.depends_question_id 
        AND 
        a.answer_val = qd.depends_answer_val
 LEFT OUTER JOIN questions q 
    ON q.question_id = a.question_id
 WHERE qd.question_id IS NULL
UNION
SELECT /*Answers and depends*/ p.paper_id AS p_pid,
  a.paper_id AS a_pid,
  a.question_id AS a_qid,
  a.answer_val AS a_val,
  qd.question_id AS qd_qid,
  qd.depends_question_id AS qd_dqid,
  qd.depends_answer_val AS qd_val,
  q.type_id AS q_type
 FROM papers p
 JOIN answers a 
    ON a.paper_id = p.paper_id
 LEFT OUTER JOIN question_depends qd 
    ON  a.question_id = qd.depends_question_id 
        AND 
        a.answer_val = qd.depends_answer_val
 LEFT OUTER JOIN questions q 
    ON q.question_id = qd.question_id
 WHERE qd.question_id IS NOT NULL
UNION 
SELECT /*Missing answer*/ p.paper_id AS p_pid,
  a.paper_id AS a_pid,
  a.question_id AS a_qid,
  a.answer_val AS a_val,
  qd.question_id AS qd_qid,
  qd.depends_question_id AS qd_dqid,
  qd.depends_answer_val AS qd_val,
  q.type_id AS q_type
 FROM papers p
 CROSS JOIN question_depends qd
 JOIN questions q 
    ON q.question_id = qd.question_id
 LEFT OUTER JOIN answers a 
    ON a.paper_id = p.paper_id
        AND
        a.question_id = qd.depends_question_id
        AND
        a.answer_val = qd.depends_answer_val
 WHERE a.question_id IS NULL 
 ORDER BY 1, 7 DESC;

请参阅codepen示例：https://codepen.io/kball/pen/QqjrvB

Answer 3

在你的情况下，“display：table”是罪魁祸首。我不知道你为什么使用显示表但我相信有很多更好的方法来获得你想要的输出，无论是垂直中心对齐还是布局等，而不使用显示表属性。

在布局中使用表是一个敏感话题，但在这里我不是在诅咒表。您可以查看https://colintoh.com/blog/display-table-anti-hero以便更好地理解人们必须非常小心地使用显示表，因为它经常导致许多意外的行为，并且我们经常最终应用hack来获得我们想要的输出。 Css flex就像魅力一样，有可能完全取代表格，如果你愿意忽视IE8和IE9，它甚至可以帮助你。

在div上没有显示的伪元素

3 个答案: