zoukankan      html  css  js  c++  java
  • 需求让我写消息气泡框,最简单便捷的方法

    效果图:

    方式一:采用定位写法 思路:设置父级容器为圆角 relative 子级使用position 颜色一样即可 注意的一点是子级添加z-index

      缺点:小程序编译测试定位出现位移,导致还原效果图失败
    

    方式二:直接采用 border-radius: 40px 40px 40px 5px[推荐]

      小技巧:border-radius 设置1个值为高度的一半,是普通的圆角;使用4个值的时候只需要按 上 右 下 左 的顺序做样式调试即可
    

    代码:

    <view class="order_content"> <view class="order_text">"打开窗帘"</view> <view class="order_side"></view> </view> <view class="order_content"> <view class="order_text">"关闭窗帘"</view> </view>
    css:

    .order_content{ position: relative; height:80rpx; margin:0; color:#fff; background: #2394FD; border-radius: 40px 40px 40px 5px; } .order_text{ text-align: center; line-height: 80rpx; } .order_side{ z-index:5; position: absolute; bottom:-27rpx; left:-25rpx; background:#2394FD; 50rpx; height:50rpx; }

    愿以往所学皆有所获
  • 相关阅读:
    flare3d_plane
    flare3d_TextureFilter
    flare3d_animation
    flare3d黄色星球案例再次解读整理
    pureMVC(二)
    flare3d_ColladaLoader
    flare3d_clone
    四则运算
    15章
    带界面的四则运算
  • 原文地址:https://www.cnblogs.com/Azune/p/12943781.html
Copyright © 2011-2022 走看看