Yomuki的博客

官方文档 https://tailwindcss.com/docs/dark-mode 默认情况下，Tailwind不启用暗模式。 启用黑暗模式 tailwind.config.js // tailwind.config.js module.exports = { // media 根据系统自动切 class 手动切 darkMode: 'media', // ... } 使用黑暗模式 自动模式 media 下 <div class="bg-white dark:bg

代码地址 横条纹 <div class="container tiaowen1"></div> .container { width:100%; height:100vh; } .tiaowen1 { background:linear-gradient(pink 50%,#000 50%); background-size:100% 20%; } 竖条纹 <div class="container tiaowen2"></div

通过outline,box-shadow实现单元素内圆角。 <div class="contaniner"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde placeat, repudiandae dolore amet praesentium, fuga a eos id, provident deleniti minima sequi voluptates rem. Sint, nesci

代码地址 box-shadow方案 box-shadow支持逗号分隔法，可以创建任意数量的投影。 注意点： 投影不会影响布局。 外投影创造出来的假边框不会响应元素鼠标事件。如果需要响应事件，应转为内投影（inset），同时需要增加额外的内边距来腾出空隙。 <div class="container one" onclick="console.log('click')" > box-shadow </div> <div class="container two"

伪元素法 在需要显示毛玻璃的div后插入伪元素，伪元素采用绝对定位（即div需要relative）,背景图与毛玻璃下的图相同。 注意点： 为了解决该方法产生的中心模糊 边缘清晰的问题，需要将伪元素进行margin负值处理，div需要添加overflow:hidden； <!-- * @Desc: * @Author: Yomuki * @Date: 2021-02-14 22:18:10 * @LastEditors: Yomuki * @LastEditTime: 2021-02

baseline 默认值。父元素基线 legth,% 数值/百分比。可为负数 sub 垂直对齐文本下标 super 垂直对齐文本上标 middle 放在父元素中部 top 元素的顶端与行中最高元素的顶端对齐 bottom 元素及其后代元素的底部与整行的底部对齐 text-top 把元素的顶端与父元素字体的顶端对齐 text-bottom 把元素的顶端与父元素字体的底端对齐 inherit 继承 当dispal