css
时遇¥.¥..
如何让我遇见你?
展开
-
table tbody内容滚动
【代码】table tbody内容滚动。原创 2022-12-09 09:18:48 · 136 阅读 · 0 评论 -
html css3 旋转
css3 旋转原创 2022-07-21 17:29:18 · 133 阅读 · 0 评论 -
让多行输入框 高度随内容变化 textarea
<textarea class="input-area" maxlength="5000" placeholder="请输入内容"></textarea>const textarea = document.querySelector(".input-area"); textarea.addEventListener("input", function (e) { this.style.height = "inherit";原创 2022-05-09 15:26:26 · 348 阅读 · 0 评论 -
手写动态圆柱体 vue scss
基于vue scss 写出来的动态圆柱体所需图片 图1 底部图片 图2 实心顶部图片 效果图<div class="column-wrap"> <div class="column"> <div class="column-opacity" /> <!-- <div class="column-solid" :style="{height:(detail.peo原创 2022-03-08 09:57:22 · 322 阅读 · 0 评论 -
手写tab左右切换
效果 :点击左右两个按钮达到切换效果(利用transform 进行平移)<div class="app"> <div class="tab-wrap"> <div class="tab"> <div ref="itemWrap" class="item-wrap" :style="{transform: `translateX(${distance}px)`}"> <div v-for="(i原创 2022-03-02 10:54:40 · 413 阅读 · 0 评论 -
text-align: justify;text-align-last: justify;实现两端对齐
实现两端对齐 问题:但是单行文本和多文本最后一行无法达到效果,然而单行文本左右对齐,这种效果在实际项目中出现的频率很高。解决思路: 利用伪元素给文本再添加一行 (图片、代码如下)<div class="test">啊大撒旦大撒旦飞洒啊大撒旦飞洒</div><div class="test">啊大撒旦飞</div><div class="t原创 2022-02-22 21:07:09 · 1157 阅读 · 0 评论 -
css backdrop-filter属性 用来做图片的部分模糊效果
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。 因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。mdn介绍示例:代码:<div class="img-box"> <div class="bottom"> backdrop-filter: blur(5px); </div> </div>.img-box { positi原创 2022-01-11 13:32:21 · 604 阅读 · 0 评论 -
背景图片大小(background-size)cover、100%和contain的区别
三者都是来定义背景图显示尺寸大小的,三者之间的区别:cover:是按照等比缩放铺满整个区域。优点:图片不会变形。 缺点:如果显示如果显示比例和显示区域的比例相差很大某些部分会不显示,比如长度比宽度大很多,则宽度左侧会有一部分不显示。100%:长宽100%显示,可能会拉升图片导致图片变形。contain:也是等比缩放,按照某一边来覆盖显示区域的,会有白边...原创 2021-12-28 18:33:28 · 2940 阅读 · 0 评论 -
关于position的属性
概述:position 属性规定应用于元素的定位方法的类型。有五个不同的位置值:static : html元素默认情况下的定位方式 – 静态 静态定位的元素不受top,bottom,left和right属性的影响。relative :元素相对于其正常位置进行定位。–相对定位 设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。fixed :元素是相对于视口定位的,-- 固定定位 这意味着即使滚动原创 2021-12-21 17:47:26 · 157 阅读 · 0 评论