随笔分类 -  css

input聚焦，label上移效果
摘要：有一个输入框，有一行lable提示文案，当输入框聚焦，文案上移 <div class="input-area"> <input type="text" class="__input" required /> <label for="" class="__tip">Input...</label> < 阅读全文
posted @ 2024-01-22 15:00 Karle 阅读(158) 评论(0) 推荐(0)
box-shadow被遮挡
摘要：场景 A B两个元素，A元素设置了box-shadow，但是B元素在与A元素重叠的时候将阴影遮挡 解决 1.A元素设置position:absolute/relative; 2.A元素设置z-index:1; 提示 因为z-index只有定位元素的情况下起效，所以单纯设置z-index无法解决问题 阅读全文
posted @ 2024-01-19 11:48 Karle 阅读(203) 评论(0) 推荐(0)
Flex布局解决最后一行左对齐
摘要：使用flex布局，将多个元素以三个为一行，往下排列。 .logo-field { width: 650px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; .__logo-item { wi 阅读全文
posted @ 2024-01-10 17:18 Karle 阅读(1037) 评论(0) 推荐(0)
css3实现滴水效果
摘要：用css3的@keyframe实现一个滴水效果 （这gif结束和开始连接有点卡顿） <div class="drop"> <div class="mother"></div> <div class="water"></div> <div class="water"></div> <div class 阅读全文
posted @ 2022-11-04 16:11 Karle 阅读(397) 评论(0) 推荐(0)
less使用calc()
摘要：在less中使用calc()要用特定格式 @myWidth: 30px; width: calc(~"100% - @{myWidth}"); width: calc(~"100% - 20px") 阅读全文
posted @ 2022-10-18 23:30 Karle 阅读(85) 评论(0) 推荐(0)