<view class="create_content"> <view class="create_content_box"> <view class="content_input"> <input type="text" value="content" placeholder="请输入内容" /> </view> <view class="content_button">创建</view> </view> </view> .create_content{ position:fixed;/*定位到最下方*/ bottom: 95px; left: 15px; right: 15px; border-radius: 50px; box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.2);/*阴影 inset 是内阴影*/ } .create_content:after{ /*实现小箭头*/ content: ''; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -15px; width: 30px; height: 30px; background:#FAECD8; transform: rotate(45deg);/*旋转*/ box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.2);/*阴影 inset 是内阴影*/ z-index: -1;/*图层显示到下面一些*/ } .create_content_box{ position: relative; display: flex; padding: 0 15px; padding-right: 0; border-radius: 50px; background-color: #FAECD8; z-index: 2;/*图层显示到上面一些*/ }
跟你box-shadow的写法有关
5个参数: x偏移量 y偏移量 阴影模糊半径 阴影扩展 阴影颜色, 你第1,2个都是正偏移