Question

如何使用box-shadow

为alement添加新的::after效果

在最后一个元素上我都想要外部暗框和白色内框

<ul>
  <li class="dropdown_calendar_li">test</li>
  <li class="dropdown_calendar_li now">test</li>
  <li class="dropdown_calendar_li selected">test</li>
  <li class="dropdown_calendar_li now selected">test</li>
</ul>

ul {
  list-style:none outside none;
    margin:0;
    padding:0;
}

.dropdown_calendar_li {
    display:inline-block;
    text-align:center;
    padding:10px;
  background:#aaa
}

.dropdown_calendar_li.now,
.dropdown_calendar_li.now.selected {
    box-shadow:0 0 0 2px #1f1f1f;
}

.dropdown_calendar_li.now.selected::after {
  box-shadow:inset 0 0 0 2px #fff;
}

Answer 1

查看更改：

.dropdown_calendar_li需要position:relative;

这样

dropdown_calendar_li.now.selected::after可以处理position: absolute;

和

:after元素需要content: ''和一些display和size属性。

＆＃13;

ul {
  list-style:none outside none;
	margin:0;
	padding:0;
}

.dropdown_calendar_li {
  position: relative;
	display:inline-block;
	text-align:center;
	padding:10px;
  background:#aaa
}

.dropdown_calendar_li.now,
.dropdown_calendar_li.now.selected {
	box-shadow:0 0 0 2px #1f1f1f;
}

.dropdown_calendar_li.now.selected::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 40px;
  display: block;
  box-shadow:inset 0 0 0 2px red;
}

＆＃13;

<ul>
  <li class="dropdown_calendar_li">test</li>
  <li class="dropdown_calendar_li now">test</li>
  <li class="dropdown_calendar_li selected">test</li>
  <li class="dropdown_calendar_li now selected">test</li>
</ul>

＆＃13;

Answer 2

伪元素至少需要content: ""。它们也需要像任何其他元素一样的尺寸，否则它们将无法显示。

在您的情况下，您可以在最后一个元素上使用两个框阴影并完全删除伪元素。

＆＃13;

ul {
  list-style:none outside none;
	margin:0;
	padding:0;
}

.dropdown_calendar_li {
	display:inline-block;
	text-align:center;
	padding:10px;
  background:#aaa
}

.dropdown_calendar_li.now {
	box-shadow:0 0 0 2px #1f1f1f;
}

.dropdown_calendar_li.now.selected {
    box-shadow:0 0 0 2px #1f1f1f, inset 0 0 0 2px #fff;
}

＆＃13;

<ul>
  <li class="dropdown_calendar_li">test</li>
  <li class="dropdown_calendar_li now">test</li>
  <li class="dropdown_calendar_li selected">test</li>
  <li class="dropdown_calendar_li now selected">test</li>
</ul>

＆＃13;

Answer 3

For ::在您需要添加内容之后：＆＃34;＆＃34;在css。试试这个

.dropdown_calendar_li.now.selected::after {
  content: "";
  box-shadow:inset 0 0 0 2px #fff;
 }

选择后的框阴影

3 个答案: