问题
开了新坑,打算试试Vuetify.js 按照官网说明折腾了半天之后算是跑起来了。css样式文件也加载进来,但是加载组件后发现基本样式丢失,颜色也是黑白的,并且console也没有报错。
解决
经过翻文档和查资料,发现是Vuetify要求必须把组件包含在<v-app>标签内。于是乎我把App.vue 内的路由外包了一层<v-app>,成功解决!
又一个WordPress站点
直接上效果图
我本来以为这个彩色的边框是个背景图片,看了一下源码竟然是个background样式,看来我学识还是太浅。
拿走了拿走了#滑稽
实现这个效果需要2个div嵌套,外层的我取class为outer-div,内层的我取class为inner-div
.outer-div{ background: linear-gradient(90deg,#34a853 4%,#4285f4 0%) top/100% 34% no-repeat,linear-gradient(90deg,#fbbc04 50%,#4285f4 0%) top/100% 82% no-repeat,linear-gradient(90deg,#fbbc04 10%,#ea4335 0%) top/100% 100%; width: 200px; /* set width yourself */ height: 350px; /* set height yourself */ padding: 4px; /* default padding is 4px, you can set any value that makes you feel good */ border-radius: 8px; /* outer-div's border-radius must be twice larger than the inner-div */ } .inner-div { width: 100%; height: 100%; border-radius: 4px; /* inner-div's border-radius must be twice lower than the outer-div */ }
随便写个DIV测试个效果
哈哈哈,真的好看诶