编写自定义vue组件中用到了“相对定位于绝对定位”、“弹性布局”、border-radius、linear-gradient以及box-shadow 添加CSS3动效时用到的animation属性、@keyframes规则以及transform属性,理解为什么要设置translateY的值 好啦,以上就是本文中用到的知识点,大家都学会了吗?
点击输入框唤起键盘,蓝框就相当于input的光标,验证码输入错误或者不符合格式要求会将字体以及边框改成红色提示,持续1s,然后清空数据,恢复原边框样式; 5位验证码输入完毕,点击页面其他位置,隐藏键盘;这时如果发现验证码有误,再次点击输入框又唤起键盘,也能正常删除数字(这里其实做的时候遇到了bug,再次聚焦不能删除错误...
-- 以下形式在微信小程序会无效,APP和H5有效 --></view></template>export default {data() {return {disabled: true,customStyle: {marginTop: '20px', // 注意驼峰命名,并且值必须用引号包括,因为这是对象color: 'red'}};}};.custom-style {color: #ff0000;width: 400rpx;} 总的来说,UniApp中各...
:focus, */元素被点击后变色,且颜色在点击后不消失*/ background: linear-gradient(#74AADA,#94db98);/*渐变色*/
根据项目需求封装~ 用到了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 dw...
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; ...
background: -webkit-linear-gradient(#fd4118, #ff851d); } // 选中图标样式 uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before { font-size: 28rpx; color: #fff; } 小程序: 因为在小程序调试工具上,CheckBox的审查结果是黑盒,实际渲染出来的类名如下(不要怀疑): ...
backgroundImage String 支持以下类型: 背景图片路径 - 如"/static/img.png",仅支持本地文件绝对路径,根据实际标题栏宽高拉伸绘制; 渐变色 - 仅支持线性渐变,两种颜色的渐变,如“linear-gradient(to top, #a80077, #66ff00)”, 其中第一个参数为渐变方向,可取值: "to right"表示从左向右渐变, “to left"...
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; } } .code_errow{ font-size:30upx; ...