css
Yomuki
这个作者很懒,什么都没留下…
展开
-
【tailwind】黑暗模式
官方文档 https://tailwindcss.com/docs/dark-mode默认情况下,Tailwind不启用暗模式。启用黑暗模式tailwind.config.js// tailwind.config.jsmodule.exports = { // media 根据系统自动切 class 手动切 darkMode: 'media', // ...}使用黑暗模式自动模式 media 下<div class="bg-white dark:bg原创 2021-03-01 11:45:45 · 1178 阅读 · 0 评论 -
【CSS】条纹背景
代码地址横条纹<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原创 2021-02-16 11:00:27 · 250 阅读 · 1 评论 -
【CSS】单元素实现边框内圆角
通过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原创 2021-02-16 10:35:06 · 162 阅读 · 0 评论 -
【CSS】多重边框
代码地址box-shadow方案box-shadow支持逗号分隔法,可以创建任意数量的投影。注意点:投影不会影响布局。 外投影创造出来的假边框不会响应元素鼠标事件。如果需要响应事件,应转为内投影(inset),同时需要增加额外的内边距来腾出空隙。<div class="container one" onclick="console.log('click')" > box-shadow</div><div class="container two"原创 2021-02-16 10:25:59 · 138 阅读 · 0 评论 -
【CSS】实现毛玻璃的两种方法
伪元素法在需要显示毛玻璃的div后插入伪元素,伪元素采用绝对定位(即div需要relative),背景图与毛玻璃下的图相同。注意点:为了解决该方法产生的中心模糊 边缘清晰的问题,需要将伪元素进行margin负值处理,div需要添加overflow:hidden;<!-- * @Desc: * @Author: Yomuki * @Date: 2021-02-14 22:18:10 * @LastEditors: Yomuki * @LastEditTime: 2021-02原创 2021-02-14 22:47:28 · 1058 阅读 · 0 评论 -
CSS学习笔记—vertical-align垂直对齐方式
baseline 默认值。父元素基线 legth,% 数值/百分比。可为负数 sub 垂直对齐文本下标 super 垂直对齐文本上标 middle 放在父元素中部 top 元素的顶端与行中最高元素的顶端对齐 bottom 元素及其后代元素的底部与整行的底部对齐 text-top 把元素的顶端与父元素字体的顶端对齐 text-bottom 把元素的顶端与父元素字体的底端对齐 inherit 继承 当dispal原创 2020-11-18 14:37:20 · 436 阅读 · 0 评论