欢迎光临
我们一直在努力
扫描二维码在手机上浏览
网站制作

一段CSS代码让div盒子有立体效果

先上效果图,再来代码:

上图是对一个336*280px大小的矩形进行了调整,给它增加了一个投影的效果,就好像它立了起来,有种立体的感觉,怎么做到的呢?其实也就是一段CSS的功夫。先确定下html结构,在你的广告div盒子里增加一个class为ad-shadow的div区块

<div class="ad-warp">
<div class="ad-shadow"></div>
<!-- 这里是广告内容,或图片或js代码 -->
</div>

然后加入css代码

.ad-warp {
margin: 20px auto;
width: 346px;
height: 290px;
position: relative;
border: 5px solid #d2d2d2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ad-shadow {
border-color: #e9e9e9 #fff #fff;
border-style: solid;
border-width: 130px 0 0 130px;
height: 0;
width: 0;
position: absolute;
left: -135px;
bottom: -5px;
}

本文是以一个336*280px的矩形广告为例,你可以根据你的广告尺寸来调整css中的代码。
主要原理还是利用css常见的border属性,通过设置其上下左右的尺寸和颜色来达到透视的效果,本文就不赘述了,有兴趣研究的朋友可以自行百度border样式。

THE END
历史上的今天
二月
1
    哇哦~~~,历史上的今天没发表过文章哦
标签
喜欢就支持一下吧!!!
点赞0打赏分享
版权声明
本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动。
转载请注明:文章转载自:灵阳星空 » 一段CSS代码让div盒子有立体效果
本文标题:一段CSS代码让div盒子有立体效果
本文日期:本文发表于 2020/02/01 12:30:01,最后更新于 2020/02/01 12:30:01,如内容失效,请反馈给我们,谢谢!
本文地址: https://www.jsksky.com/css-makes-div-have-three-dimensional-effect.html

网络臭虫

已发布411篇文章
吃得苦中苦,方为人上人,不卧薪藏胆,哪能苦尽甘来?点击进入我的网站了解更多有关我的信息。

评论 抢沙发

评论前必须登录!

 


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏