css
文章平均质量分 60
thirteen_king13
这个作者很懒,什么都没留下…
展开
-
关于前端实现平方等上下角标的方法
方法一:直接复制法m² m³ m⁴ m⁵ mⁿm⁰¹²³⁴⁵⁶⁷⁸⁹详情参考方法二:标签法<div>m<sup>2</sup></div><div>m<sup>3</sup></div><div>m<sup>0123456789</sup></div><div>x<sub>2</sub></div>原创 2021-09-23 15:41:06 · 3489 阅读 · 0 评论 -
关于前端如何用原生实现刻度尺
刻度线主要通过 background中的 linear-gradient来实现,以为在demo中使用了一部分cm,mm做单位,可能存在误差先上代码:<div class="ruler"> <div class="scal-line"> <div class="exactly-ten"></div> <div class="scal-txt" id="txt"></div> </div></div&g.原创 2021-09-13 16:26:57 · 2430 阅读 · 0 评论 -
关于用 CSS 实现优惠券样式,内凹圆角及虚线处颜色透明
关于一些边线波浪线的使用,可以参考这篇文章。<div class="coupon"> <div class="left"> <div class="left-wave"></div> 优惠券 </div> <div class="mid"> <div class="top-radius"></div> <div class="mid-left"></div> ..原创 2021-09-09 16:03:40 · 1594 阅读 · 0 评论 -
关于如何用 CSS 实现不同类型波浪线
1. 样式一<div class="box"> <div class="wave"></div></div>.box { position: relative; width: 800px; height: 30px; margin: 100px auto; background-color: #0f0;}.wave { position: absolute; left: 0; top: -5px; width: 100%;原创 2021-09-09 15:57:04 · 2056 阅读 · 0 评论 -
关于CSS 的 box-shadow 的个人理解,及如何实现给盒子四周添加上阴影即环形圆形阴影,以及只给盒子一边添加阴影即单边阴影
CSS 中的 box-shadow 用来为盒子添加阴影先看一下官方文档的描述:语法:box-shadow: h-shadow v-shadow blur spread color inset;注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值原创 2021-03-26 14:17:12 · 5791 阅读 · 1 评论 -
关于 CSS 如何实现文字溢出隐藏时,隐藏左边而不是右边
通常指定一个盒子给定宽高,当文字溢出,会换行显示出来。.box { width: 60px; height: 30px; background-color: #ff000020;}当限制文字不换行后,会在一行超出显示出来。.box { width: 168px; height: 30px; background-color: #ff000020; white-space: nowrap;}添加溢出隐藏,则会自动隐藏右侧文字.box { width: 168px;原创 2021-08-16 14:44:25 · 2174 阅读 · 4 评论 -
关于如何使用原生实现表格固定列,纯 CSS 实现
在使用 HTML 的表格标签时,当表格项过多时,左右拉动时,希望固定几列不随水平滚动条滚动,表头也不随竖直方向滚动而滚动。在使用组件库的时候,通常都有成熟的API。思路一: 是在查找资料中发现的,创建多个 table 将首尾需要固定的列使用单独的表格,然后对需要固定的列所在表格添加position: absolute,本人想通过一个表格实现,未使用该方法。思路二: 通过position: sticky 实现...原创 2021-08-13 16:04:06 · 1706 阅读 · 1 评论 -
关于当鼠标悬浮时如何修改文字内容,即通过 css 样式切换文字内容
用JS或CSS如何修改网页的文本内容?纯CSS实现鼠标放上去改变文字内容.remind span {display:block;margin-top:-22px;}.remind a:hover {padding-top:22px;}.remind a {float:left;overflow:hidden;}.remind{height:22px;line-height:22px;overflow:hidden;padding-left:10px;}如需修改帐号,请发送修改信息及相关证明至邮箱原创 2021-08-13 13:54:52 · 7930 阅读 · 0 评论 -
关于 input 如何对输入框进行限制数字,小数点,及小数点后数字个数等问题
如何在限制 input 只能输入数字和小数点,如何限制只能输入一个小数点,如何限制小数点后小数的个数,如何限制数字的大小等原创 2021-06-10 13:55:24 · 32880 阅读 · 9 评论 -
关于如何在 js 中操作 css 动画的问题,即动态修改 css 动画
方法一:js 操作animationcss 中使用动画,会先定义一个@keyframes 在@keyframes里指定 css 样式,动画将在特定事件内逐渐从当前样式更改为新样式。css 使用动画第一步:定义动画变化的样式@keyframes example { from {background-color: red;} to {background-color: yellow;}}@keyframes test { 0% {background-color: red;} 100原创 2021-06-10 10:22:00 · 9069 阅读 · 2 评论