- 2024-11-21要让Chrome支持小于12px的文字怎么做？
Chrome默认不支持小于12px的文字，这是为了保证网页的可访问性。小于12px的文字在很多屏幕上难以阅读，尤其对于视力较差的用户。但是，如果你确实需要显示小于12px的文字，有几种方法可以实现：使用transform:scale():这是最常用的方法，它可以缩放元素，包括其中的文字。
- 2024-07-31封装Vue 的 SVG 组件
svg静态资源在assets下新建一个svg文件夹，用于存放svg图片svgIcon组件在components下新建一个文件夹，包含两个文件index.ts和SvgIcon.vuevue.config.jsmain.ts需要引入组件svgIcon使用**.vue<svg-icon iconClass="invite" className="iconicon-invite" /> *
- 2024-04-22文字动态地变大变小（CSS）
要在CSS中动态地改变文字大小，可以使用@keyframes规则创建一个动画，然后将该动画应用到需要改变大小的文本元素上。以下是一个示例，演示如何使文字大小在一定时间内从小变大，然后再变小：css部分：/*定义一个名为resizeText的动画*/@keyframesresizeText{0%{font-si
- 2024-04-18css 动画之无缝跑马灯
<divclass="target-top"style="overflow:hidden"><divclass="target-img"><divv-for="itemintargetFors":key="item.id">...//内容不重要</div></div>
- 2024-03-25如何忽略Chrome最小字号的限制
通过控制台调整字体大小时，可以发现即便设置了小于12px的字号，也并不会变小，这是因为Chrome默认最小字号为12px。在Chrome设置中的外观选项卡中可以发现，默认字体是16px。将最小字号改为0，就能随意设置小于12px的字号了。但是无法保证用户也进行了相同设置，此时可以利用缩放进
- 2024-03-14vue3 瀑布流 vue-masonry使用方法
npminstallvue-masonry--savemain.js文件中引入import{VueMasonryPlugin}from"vue-masonry";app.use(VueMasonryPlugin)在页面中使用<divv-masonrytransition-duration="0.3s"item-selector=".item"
- 2023-12-12chrome弧形标签页实现思路收录
1. 直线圆角，通过单个伪元素的border-radius产生弧形<template><divclass="tab-list"><divv-for="tabintabs":key="tab.id"class="tab-item":class="activeTab===tab.id?'ac
- 2023-12-12css实现鼠标滑过提示文字
第一种：鼠标滑过图片，提示文字，如图： <divv-if="talentCardNum&&talentCardNum>0"><img@mouseenter="choice(1)"@mouseleave="choice(0)"class="box_time_icon":src="hovers==0?require('@/assets/Q
- 2023-11-17纯CSS3实现圆圈动态发光特效动画
参考文档：https://www.cnblogs.com/cyfeng/p/12625606.htmlhtml文件： <div class="item"></div>css文件： <!DOCTYPEHTML><html><head><title>纯CSS3实现圆圈动态发光特效动画</title><style>bo
- 2023-11-07数据可视化 - 使用swiper制作滚动表格[vue3]
html部分1<divclass="scroll-table">2<divclass="scroll-table-header">3<tableclass="scroll-table-header__table">4<colgroup>5<col
- 2023-09-15css做个芒果，哈哈
前几天写border-radius的时候，突然想到了写个芒果color:#0000;width:120px;height:120px;background:#333;/*overflow:hidden;*/border-radius:50%340%127%256%;background:orange;background:#ffcc3a;box-shadow:-3px6px12pxorange,inset3px-6px12p
- 2023-06-0225宫格
.icon-list{display:grid;grid-template-columns:repeat(5,1fr);/*划分为5列*/grid-template-rows:repeat(5,1fr);/*划分为5行*/gap:12px;/*间隔为12像素*/.icon-item{width:48px;height:48px;border-radius
- 2023-04-28支持ff/ie的form内容必填出错提示
当前控件填写有误,则后面显示表示错误图片,并首个对象获得焦点,ff/ie通过 可以修改一下js达到不必每个控件后面先放一图片,可以动态生成,再消掉<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htm
- 2023-04-05移动端响应式布局
实现响应式布局开发的步骤寻找参照的比例（例如设计稿的比例），在这个比例下给网页的字体设置一个初始值，便于计算可以设置为100px，不可以设置为12px以下的，因为浏览器最小字体为12px，如果设置为10px则会按照12px进行计算。未来我们要把设计稿中测量出来的尺寸（px）转换为REM单位去设置样式
- 2023-03-20fieldset的样式和使用
fieldset{border:1pxsolid#61B5CF;margin-top:16px;padding:8px;}legend{font:bold12pxArial,Helvetica,sans-serif;color:#00008B;background-col
- 2023-02-15html必知必会
快速居中：bodydisplay:flex;.con:margin;padding和margin的区别：作用对象不同；padding作用于自身盒子大小会增加，margin是作用于外部vw和百分比的区别： 百分比有继承关系;
- 2023-01-12Taro css
小红点&::before{content:"";display:block;width:12px;height:12px;back
- 2022-12-30设置浏览器显示小于12px以下字体的三种方法
设置浏览器显示小于12px以下字体的三种方法 使用场景：以往设计图给的字号一般最小就是12px，开发人员一般是使用谷歌浏览器来进行调试运行。谷歌浏览器上显示字体最小
- 2022-12-16RiPro主题二级菜单添加小圆点图标
RiPro主题二级菜单添加小圆点图标效果展示在ripro/assets/css/diy.css中添加下列CSS.lanse{box-sizing:border-box;content:'';width:12px;height:12px;border-radius:50%;
- 2022-12-13如何让Chrome支持小于12px 的文字
前言Chrome中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制原由Chrome团队认为汉字小于12px就会增加识别难度中文版浏览器与网页语言无关，取决于用户在C
- 2022-12-13input checkbox改变颜色
input[type=checkbox]{margin-right:5px;cursor:pointer;font-size:14px;width:15px;height:12px;position:relative;}input[type=checkbox]:
- 2022-12-06CSS——如何使网页字体小于12px
前言有时候可能遇到UI设计的网页字体大小小于12px，针对这种字体大小我们如何设置呢？text-size-adjust:https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adju
- 2022-12-01【开发小技巧】022—CSS如何实现字体小于12px的效果
大家都知道设置font-size小于12px的时候，显示都为12px。无法实现更小的字体了，但是面对UI图的时候出现小于10px的字体，第一想到的就是把字体直接作为图片放在到页面。那么CSS能
- 2022-11-20css怎么设置字体小于12px
因为浏览器的限制，网页上的字体最小只能设置12px，因为小于12px就会影响浏览效果但有时候我们需求就是要将字体设置的很小这就需要用到特殊的手段，用transform属性设置用tran
- 2022-11-18vue elementui Switch组件添加开关样式
/deep/.el-switch{ &::before{ content:'开'; display:none; color:#fff; z-index:1;