小程序笔记（三）（常用CSS样式）

张豆豆94

已于 2022-02-15 09:57:25 修改

阅读量836

点赞数

CC 4.0 BY-SA版权

分类专栏：【微信小程序笔记】文章标签： css 小程序 css3

于 2020-12-08 17:51:34 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42735261/article/details/83112157

【微信小程序笔记】专栏收录该内容

4 篇文章

订阅专栏

本文汇总了CSS中的一些实用技巧，包括margin和padding的顺序、文本超出显示的处理方式、iOS滚动条优化、居中布局方法、卡券样式、审核状态标签的创建、文字模糊和毛玻璃效果，以及多重边框和虚线框的绘制等。同时，还提供了隐藏文本、清除输入框内阴影、设置placeholder颜色和将图片作为边框等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

margin外边距 padding内边距顺序
上、右、下、左
上、右左、下
上下、右左
一行文本超出…

//宽度固定
.single {
	width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: break-all;
}

多行文本超出显示…

//宽度不固定
.more {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  work-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; //指定行数
  line-clamp: 2;
}

IOS 手机容器滚动条滑动不流畅

overflow: auto;
-webkit-overflow-scrolling: touch;

隐藏滚动条样式

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

::-webkit-scrollbar {
    display: none;
}

CSS居中方法总结

css垂直居中参考：CSS垂直居中常用方法集结
css水平居中参考：CSS水平居中常用方法集结
css水平垂直居中参考：CSS水平垂直居中常用方法集结

卡券样式效果

.coupon {
 width: 300px;
  height: 100px;
  line-height: 100px;
  margin: 50px auto;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
  radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
  radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
  radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}
.coupon span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  color: red;
  font-size: 50px;
  font-weight: 400;
}

<p class="coupon">
 <span>200</span>优惠券
</p>

右上角审核状态标签

    <view class="stateView">
      <view class="triangle-refuse"></view>
      <view class="stateTxt">已驳回</view>
    </view>

.stateView {
  position: absolute;
  right: 0rpx;
  top: 0rpx;
}

.triangle-refuse {
  width: 0;
  height: 0;
  border-top: 100rpx solid red;
  border-left: 100rpx solid transparent;
}

.stateTxt {
  width: max-content;
  color: #ffffff;
  transform: rotate(45deg) translateY(-80rpx) translateX(-40rpx);
}

右上角三角形标签

文字模糊效果

.text{
   color: transparent;
   text-shadow: #111 0 0 5px;
}

模糊文字

毛玻璃效果

.blur {
    display: block;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    filter: blur(10px);
}

多重边框

重复指定box-shadow实现多重边框效果

div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}

虚线框绘制

.dotted-line {
  width: 400px;
  margin: auto;
  padding: 20px;
  border: 2px dashed transparent;
  background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em);
}

在这里插入图片描述

直接border属性dashed效果

隐藏文本的常用两种方法

text-indent: -9999px; 或者 font-size: 0;

IOS清除输入框内阴影

input {
  -webkit-appearance: none;
}

设置输入框placeholder默认字体颜色

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #c7c7c7;
}

将图片设置为边框
使用 border-image 将下图设置为边框

.box {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url('https://mmbiz.qpic.cn/mmbiz_png/5Xv0xlEBe98mbr6Uwf3N0ich1zbZRRgBL9aA5CxDicr0ViabEt5j6DUbUSm1vqawmpibJyGTUaZUtuS5tzxRThJ2fA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1') 20% round;
}

效果图