Honiler的博客

​核心知识点：CSS radial-gradient() 函数，用径向渐变创建 "图像"

touch-callout: none;-webkit-touch-callout: none;-ms-touch-callout: none;-moz-touch-callout: none;

效果演示：代码：<template> <view> <view v-if="packerState != 3" class="packer-box flex-column"> <view class="packer-bg anim-ease-in" :class="{ 'anim-fade-out': packerState == 2 }"></view> <view class="packer-bottom-

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

微信小程序.wx-checkbox-input-checked,.wx-radio-input-checked,.wx-switch-input-checked { background-color: #0099ff !important; border-color: #0099ff !important; color: #fff !important;}uniapp.uni-checkbox-input-checked,.uni-radio-input-checked,.uni

input,textarea { caret-color: #0099ff;}

.safe-area-inset-bottom { padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2 padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>=11.2}注：H5设置meta标签viewport-fit值为cover才有效（小程序默认），即令页面内容充满可视窗口，而非默认auto/c..

限制单行文字.single-text { min-width: 0; // 防止其他元素被挤压 text-overflow: ellipsis; // 超出文字显示... word-break: break-all; overflow: hidden; white-space: nowrap;}限制两行以上文字.double-text { min-width: 0; // 防止其他元素被挤压 overflow: hidden; text-overflow: ellipsi.

实现效果：代码实现：<view class="page"> <view class="m-30" style="margin-top: 90rpx;">翻滚吧！立方体！</view> <view class="board"> <!-- start 参考线 --> <view style="position: absolute; font-size: 0; transform: translateZ(-72rpx);"

实现效果：绘制步骤：① 绘制6个面，2个正方形 + 4个长方形② 旋转各个面的角度③ 摆放各个面的位置代码实现：<div class="cuboid"> <div class="bottom">下</div> <div class="top">上</div> <div class="right">右</div> <div class="left">左</div>

实现效果：绘制步骤：① 绘制6个正方形② 旋转各个正方形的角度③ 摆放各个正方形的位置代码实现：<div class="cube"> <div class="bottom">下</div> <div class="top">上</div> <div class="right">右</div> <div class="left">左</div> <div c

button { margin: 0; padding: 0; outline: none; border-radius: 0; background-color: transparent; line-height: inherit; width: max-content;}button:after { border: none;}

假如希望input的高度是40px，把height/line-height的值设置为足够显示内容的值或者光标的最大理想高度，其余高度用padding填充保证输入组件有足够的响应区域。input { padding: 10px 0; height: 20px; line-height: 20px;}...

input,textarea { caret-color: #FA0560;}