Question

如何给边框留下阴影？

css代码：

p{
  border-right:2px solid black;
  line-height:4em
}

现在是否可以为这个边界提供阴影？

Answer 1

取决于您想要实现的阴影类型

动态生成边框并添加阴影

p {
    line-height:4em;
    position: relative;
}

p::after {
    content: ' ';
    width: 2px;
    height: 4em;
    background-color: black;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: 3px 3px 2px red;
}

<p>Stack Overflow</p>

右侧的简单偏移阴影

p {
    border-right:2px solid black;
    line-height:4em;
    box-shadow: 2px 0px red;
}

<p>Stack overflow</p>

Answer 2

p{
    border-right:2px solid black;
    line-height:4em;
    box-shadow: 10px 10px 5px #000000;
}

Answer 3

可以使用box-shadow。

一般示例

p {
  border:2px dashed #000;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  width:100px;
}

<p>some content</p>

右阴影示例

p {
  border:2px dashed #000;
  -webkit-box-shadow: 10px 0 rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 0 rgba(0,0,0,0.75);
  box-shadow: 10px 0 rgba(0,0,0,0.75);
  width:100px;
}

<p>some content</p>

您可以在此处找到生成箱形阴影的工具：http://www.cssmatic.com/box-shadow

来自官方规范

'box-shadow'属性会在框中附加一个或多个阴影。该属性接受“无”值（表示无阴影）或逗号分隔的阴影列表（从前到后排序）。 https://drafts.csswg.org/css-backgrounds-3/#box-shadow

Answer 4

只需添加p{ border-right:2px solid black; line-height:4em; -moz-box-shadow: 1px 0 0 red; -webkit-box-shadow: 1px 0 0 red; box-shadow: 1px 0 0 red; width: 200px; /* for demo purpose only*/ }属性，如下所示

＆＃13;

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, fugit!</p>

＆＃13;

Client client = new Client(crCtx, Protocol.HTTPS);
ClientResource clientResource = new ClientResource("https://example.com");
clientResource.setNext(client);

＆＃13;

小提琴：createNamedQuery

Answer 5

使用此

<!DOCTYPE html>
<html>
<head>
    <title></title>

<style type="text/css">
.shadow{
    box-shadow: 1px 2px 3px black;
}

</style>

</head>
<body>

<p class="shadow">Shadow for me</p>

</body>
</html>

这将为整个宽度添加。

注意有关更多详细信息，这是css语法

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

none：默认值。没有阴影显示

h-shadow：必填。水平阴影的位置。允许使用负值。

v-shadow：必填。垂直阴影的位置。允许使用负值。

模糊：可选。模糊距离。

传播：可选。阴影的大小。允许使用负值。

Answer 6

您可以使用box-shadow

执行此操作

＆＃13;

p {
  border-right: 2px solid black;
  line-height:4em;
  display: inline-block;
  -webkit-box-shadow: 15px 0px 10px -10px rgba(0,0,0,0.51);
  -moz-box-shadow: 15px 0px 10px -10px rgba(0,0,0,0.51);
  box-shadow: 15px 0px 10px -10px rgba(0,0,0,0.51);
}

＆＃13;

<p>Lorem ipsum dolor.</p>

＆＃13;

或尝试:after和linear-gradient

＆＃13;

p {
  border-right: 2px solid black;
  line-height:4em;
  display: inline-block;
  position: relative;
}

p:before {
  position: absolute;
  z-index: -1;
  top: 10%;
  right: -5px;
  width: 5px;
  height: 100%;
  background: linear-gradient(transparent, #aaa, transparent);
  content: '';
}

＆＃13;

<p>Lorem ipsum dolor.</p>

＆＃13;

Answer 7

p {
    line-height:4em;
    position: relative;
}

p::after {
    content: ' ';
    width: 2px;
    height: 4em;
    background-color: black;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: 3px 3px 2px red;
}

<p>Stack Overflow</p>

如何给边框留下阴影

7 个答案:

动态生成边框并添加阴影

右侧的简单偏移阴影