编写自定义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);/*渐变色*/
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;
<template> <!-- 轮播图 --> <view class="banner-box"> <!-- 背景色 -->: ; <!-- background-image使用单引号 --> <view class="banner-bj" :style="{'background-image':`linear-gradient(${bannerBackGround||'#345DC2'} 50%, #fff)`}"> </view> <!-- 轮播图展示 --> <!-- in...
&::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; ...
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的审查结果是黑盒,实际渲染出来的类名如下(不要怀疑): ...
background: linear-gradient(180.00deg, rgb(12, 14, 17), rgb(29, 58, 96) 40.596%, rgb(15, 21, 22) 78.187%); height: auto; color: #FFF; }