关注
分享
面向Web3，春暖花开
这个作者很懒，什么都没留下…
展开
-
iPhone 手机浏览器 font-size 失效问题
问题电脑端浏览器显示正常，iPhone手机浏览器却异常，如下图 用Safari调试iPhone手机网页，可以看到设置了 font-size: 12px 但实际浏览器渲染的字体大小却是 16px解析因为 Font Boosting 字体提升Webkit 给移动端浏览器专门提供的属性 ，因为移动端屏幕小，原始页面宽度大，在移动端浏览器浏览网页时的字体会比较小，看不清，Font Boosting 会自动把字体变大，方便浏览。解决直接为该失效元素加一行代码：text-size-adjust:原创 2022-05-15 17:22:56 · 1349 阅读 · 0 评论 -
CSS 修改SVG颜色并且宽高自适应
需求下图中的图案和文字根据网站的主题色更新缩放屏幕大小时，图片可以根据屏幕大小自适应默认图片的 svg 代码<svg width="198" height="206" viewBox="0 0 198 206" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg-icon"> <rect x="8.5" y="24.5" width="181" height="181" rx="3.5" fill="#ff原创 2022-02-21 15:42:05 · 5059 阅读 · 0 评论 -
filter drop-shadow 阴影
简介filter：滤镜drop-shadow：给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本浏览器兼容性filter 函数1.blur(px)给图像设置高斯模糊,值越大越模糊。默认是0，可设置css长度值，但不接受百分比值。2.url()接受一个XML文件。该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。如：filter: url(svg-url#element-id)3.hue-rotate(deg)给原创 2020-06-02 14:51:40 · 5486 阅读 · 0 评论 -
css clip-path 画五角星
简介使用裁剪方式创建元素的可显示区域，实现区域裁剪。浏览器兼容性常用的三种方法1. clip-path: circle(50px at 50px 50px)以 50px 50px 的坐标为圆心裁剪一个半径 50px 的圆；2. clip-path: ellipse(30px 40px at 50px 50px)以 50px 50px 的坐标为圆心裁剪一个横向半径 30px，纵向半径 40px 的椭圆；3. clip-path: polygon(50% 0, 100% 50%, 50% 10原创 2020-06-02 14:15:09 · 1296 阅读 · 0 评论 -
js progress 滑动条实现投资计算器
此文为js实现投资计算器，并且对复投与非复投的盈利进行对比。如下图：技术方面就用到一个简单的滑块，因为感觉比较简单所以打算手写一下，不想再因为这一个小东西引入一个庞大的UI插件，该文就此诞生。滑块核心js就这么一点点，其余均为盈利计算。// 移动端事件onTouchEvent(e) { // 滑块移动横向距离 this.touchx = e.touches[0].pageX - 40; this.computedAmount(e.target.id);},// pc 端事件.原创 2020-05-08 18:50:15 · 398 阅读 · 0 评论 -
iOS 改变input disabled 默认的字体颜色
本以为改变input[disabled]的字体颜色只需要改变color和opacity就可以了，结果发现在iPhone手机和Mac的Safari浏览器中都不起作用。所以接下来我们来研究一下它。1.设置 -webkit-text-fill-colorinput:disabled,input[disabled] { -webkit-text-fill-color: #2c363f; ...原创 2019-11-21 14:29:45 · 1642 阅读 · 0 评论 -
如何用js改变伪元素样式
通常设置伪元素的样式直接用CSS很方便.test:after{ content:''; display:block; width:100%; height:100%; background:red;}可是有时候想用js动态的去改变伪元素的样式，但是js获取不到伪元素，这就很头疼，不过我们可以换个思路来解决这个问题:方法一：直接给元素追加一个<style>标签$('...原创 2019-09-30 10:02:13 · 2849 阅读 · 0 评论 -
word-break 与 word-wrap
break-word会对过长的单词做词内断词处理，这样单词始终会在容器中，不会溢出容器break-all很暴力的一种处理方法，过长单词先断词处理，占满一行，然后再换行处理每次看到这两个css属性都是一种眼晕的感觉，今天就来总结一下。首先我们来来分别介绍一下这两个属性有哪些值：word-break:值描述break-all允许单词内换行keep-all&nb...原创 2019-09-03 16:00:50 · 788 阅读 · 0 评论 -
纯CSS日期时间变化时出现翻转的3D立体动效
日期时间变化时出现翻转的3D立体动效HTML<body onload="loaded()"> <div id="wrapper"> <div id="scroller"> <div class="scroll-box"> <ul class="row mt-170"> ...原创 2019-08-27 12:09:52 · 671 阅读 · 0 评论 -
css animation背景图切换在iOS下的bug
animation切换背景图在iOS的休眠转态重新唤醒时造成背景图为空1. 首先遇到的问题有个项目需要用css animation 来切换背景图，简单来说就是这样：@keyframes toggle-bg{ from{ background-image: url(img/bg1.png); } to{ background-image: url(img/bg2.pn...原创 2019-08-29 08:12:13 · 1092 阅读 · 1 评论