gpt4 book ai didi

html - 像图像一样显示 boxshadow

转载 作者:行者123 更新时间:2023-11-28 09:46:22 24 4
gpt4 key购买 nike

我想从 psd 文件中制作像这个框一样的阴影:我已经截图了:

http://s3.postimg.org/k59bfo5s3/boxshadow.png

我不知道怎么用css代码来实现

但我的另一个想法是像那样从 PSD 文件中提取阴影

并将它移动到我的 html 页面,但我不知道我可以在哪里放置阴影图像的代码

http://jsfiddle.net/4pbq2tx8/11/

html:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<div id="carousel">
<div class="title">title</div>
</div>
</body>
</html>

样式:

#carousel {
border:solid 1px #1a1a1a;
position:relative;
width:903px;
height:299px;
margin:0 auto;
margin-top: 50px;
background:url(http://s22.postimg.org/l2e24m48x/light.png) ;
/* my probleme is here */
box-shadow: url(http://s14.postimg.org/7tmkd1hfl/shadow.png);
}

body {
background-color: #c7c7c7;
}

.title {
position:absolute;
width:902px;
height:47px;
bottom: 0;
left:0;
line-height: 47px;
border:solid 0.5px #686868;
background:url(http://s22.postimg.org/s4bzqt7up/title.png) bottom left repeat ;
}

最佳答案

1/

尝试一下:

#carousel:after {
position: absolute;
z-index: 9999;
bottom: -100px;
content: " ";
width: 100%;
height: 100px;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}

JSFIDDLE LINK

2/

如果你想让阴影的长度精确到 1100px,你需要做一些改变:

.wrap {
position: relative;
width: 1100px;
}
.wrap:after {
position: absolute;
bottom: -95px;
z-index: 9999;
content: " ";
height: 100px;
width: 100%;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}

并将您的#carousel 包装在.wrap

<div class="wrap">
<div id="carousel">
...
</div>
</div>

JSFIDDLE WITH WRAPPER

关于html - 像图像一样显示 boxshadow,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25241839/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com