css中怎么让div感觉上是凸出来的

html-css019

css中怎么让div感觉上是凸出来的,第1张

这个简单，给DIV层加上边框阴影就可以了

给CSS加上这个box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.2)就行了，你可以百度一下我的网名，我的站里用了很多这种效果，应该就是你所说的凸出来的效果。

.line{            position: relative            width: 100%            height: 20px            border: solid 1px #ccc

        }        .line:before{            position: absolute            top: -16px left: 45%            content: ''            width: 0 height: 0            border-style: dashed dashed solid dashed            border-width: 8px            border-color: transparent transparent #ccc transparent

        }        .line:after{            position: absolute            top: -14px left: 45%            content: ''            width: 0 height: 0            border-style: dashed dashed solid dashed            border-width: 8px            border-color: transparent transparent #fff transparent

        }

<div class="tip1">这是个小提示</div>

<div class="tip2">这是个小提示</div>

<style>

.tip1{width:150pxheight:40pxline-height:40pxbackground:#FA5889font-size: 14pxcolor:#ffftext-align: centerposition: relativemargin:50pxfloat: left}

.tip1:after{content:" "border:solid 10px transparentborder-top:solid #FA5889 10pxwidth:0pxheight:0pxposition: absolutedisplay: blockleft:65pxbottom:-10}

.tip2{width:150pxheight:40pxline-height:40pxbackground:#37A7D7font-size: 14pxcolor:#ffftext-align: centerposition: relativemargin:50pxfloat: left}

.tip2:after{content:" "border:solid 5px transparentborder-bottom:solid #fff 5pxwidth:0pxheight:0pxposition: absolutedisplay: blockleft:65pxbottom:0}

</style>