如何给边框阴影
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何给边框阴影相关的知识，希望对你有一定的参考价值。
如何给边框阴影？
css代码：
p
border-right:2px solid black;
line-height:4em
现在可以在此边框上加上阴影了吗？
答案
取决于您要获得哪种阴影类型
动态生成边框并添加阴影
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>另一答案
您可以使用box-shadow执行此操作
box-shadowp
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);
另一答案
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: '';
另一答案
只需添加<p>Lorem ipsum dolor.</p>属性，如下所示
p
border-right:2px solid black;
line-height:4em;
box-shadow: 10px 10px 5px #000000;
box-shadow另一答案
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, fugit!</p>可以。
一般示例
https://jsfiddle.net/nikhilvkd/pnajhz9g/
box-shadow另一答案
使用此
http://www.cssmatic.com/box-shadow
这将增加整个宽度。
注意有关更多详细信息，这是css语法
https://drafts.csswg.org/css-backgrounds-3/#box-shadow
无：默认值。没有阴影显示
h-shadow：必需。水平阴影的位置。允许使用负值。
v-shadow：必需。垂直阴影的位置。允许使用负值。
模糊：可选。模糊距离。
spread：可选。阴影的大小。允许使用负值。
另一答案
<!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>
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
以上是关于如何给边框阴影的主要内容，如果未能解决你的问题，请参考以下文章