编写自定义vue组件中用到了“相对定位于绝对定位”、“弹性布局”、border-radius、linear-gradient以及box-shadow 添加CSS3动效时用到的animation属性、@keyframes规则以及transform属性,理解为什么要设置translateY的值 好啦,以上就是本文中用到的知识点,大家都学会了吗?
点击输入框唤起键盘,蓝框就相当于input的光标,验证码输入错误或者不符合格式要求会将字体以及边框改成红色提示,持续1s,然后清空数据,恢复原边框样式; 5位验证码输入完毕,点击页面其他位置,隐藏键盘;这时如果发现验证码有误,再次点击输入框又唤起键盘,也能正常删除数字(这里其实做的时候遇到了bug,再次聚焦不能删除错误...
根据项目需求封装~ 用到了linear-gradient // 所用到参数 X 水平 Y 垂直 dash 虚线 solid 实线 color 颜色 "dash-width" 每条虚线宽度(px) 1. 2. 3. 4. 5. 6. 7. 组件使用 <template> <dw-line dash X></dw-line> </template> import dwLine from "@/components/Line/dwLine"; 1. 2. 3...
:focus, */元素被点击后变色,且颜色在点击后不消失*/ background: linear-gradient(#74AADA,#94db98);/*渐变色*/
u-button></view></template>export default {data() {return {disabled: true};}}; 定义需要用到的外部样式 针对非微信小程序平台,组件的根元素就是uni-appbutton组件,所以修改按钮的样式很容易,直接给组件定义类名或者嵌入内联样式即可。 如果是微信小程序,编译后页面会有组件同名的元素存在,导致样式传递有问题...
background: linear-gradient(90deg, #f6ad49, #ee7800); border-radius: 45px; border: 0; color: #fff; font-size: 16px; margin-top: 40%; } html{ height: 100%; } body{ height: 100%; display: flex; flex-direction: column;
&::before{content:'';position: absolute;bottom:0;width:40upx;height:19upx;background:linear-gradient( to right,rgba(57,181,74,1),rgba(57,181,74,0.1) ); } }.close-icon{background:#f2f4f7;border-radius:50%;display: flex;align-items: center;justify-content: center; ...
| backgroundImage | String | | 支持以下类型: 背景图片路径 - 如"/static/img.png",仅支持本地文件绝对路径,根据实际标题栏宽高拉伸绘制; 渐变色 - 仅支持线性渐变,两种颜色的渐变,如“linear-gradient(to top, #a80077, #66ff00)”, 其中第一个参数为渐变方向,可取值: "to right"表示从左向右渐变,...
linear-gradient(0deg, rgb(27 27 27 / 90%), rgb(27 27 27 / 40%)); background-repeat: no-repeat; background-position: top, bottom; transform: translateZ(0); } } } 2 changes: 1 addition & 1 deletion 2 packages/nutui/package.json Original file line numberDiff line numberDiff lin...
background: -webkit-linear-gradient(#fd4118, #ff851d); } // 选中图标样式 uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before { font-size: 28rpx; color: #fff; } 小程序: 因为在小程序调试工具上,CheckBox的审查结果是黑盒,实际渲染出来的类名如下(不要怀疑): ...