css3
关注
分享
扫一扫
yunchong_zhao
这人比较懒，不喜欢写简介
展开
-
vite项目中 引入本地word文档，docx文件渲染到本地
又是一周休息的时刻了 关注我 持续更新 前端知识 帮助刚入行的前端童鞋一点，能帮点就帮点，都是踩坑的经历。在本地渲染很简答 需要一个插件 就可以了。这个样式注意下 如果是在移动端使用的话。原创 2023-03-10 21:34:44 · 370 阅读 · 0 评论 -
周末无事做一个，左右滑动的容器，底部有滑动进度指示的 前端小demo（常见于移动端）
先上效果图吧 其实还是比较简单的，就是监听上面滚动的距离 占 父元素可滚动距离的百分比进行 在手机上查看效果更好。啥都不说 先上例子 这个在移动端非常常见哈！我们web前端 什么小程序和h5其实也会碰见。关注 长期更新前端相关知识。原创 2023-02-04 10:43:22 · 161 阅读 · 0 评论 -
css将元素置于视图中心，禁止底部遮罩层滚动
禁止遮罩层滚动这个其实比较好处理 我们有的时候 会自己封装一个遮罩层，但是在上面弹出东西的时候，下面的内容还在滚动 其实这个时候我们可以通过js进行控制的。将元素设置到视图中心(不论页面怎么滚动都在中心位置) 这个更简单了 就是css3的属性 我们不考虑元素的宽高哈。全屏的遮罩层 其实也好处理 就是讲一个元素基于body 进行 绝对定位 然后宽高设置 100% 100% 即可。google firfox safari 都可以哈。关注我 持续更新前端知识。原创 2022-11-01 16:13:56 · 1300 阅读 · 0 评论 -
css 让文字进行竖着书写， 附带个小知识，行内块元素添加文字之后底部对不齐的问题
就是如果是图片的话 baseline 默认元素放置在父元素的基线上 然后再仔细去看下上面的那张图片 你就会发现。但是细心的同学会看见那个 g字母底部会超出一部分（这个也是图片的那个白色节点的问题）其实这个问题 如果你觉得难写的话，只能说你想的复杂了，在文字排版中，如果元素的宽度不够的话那么文字会自动换行的，所以只要父亲元素的宽度不够两个汉字 那么它就会换行了，就这么简单。附带一个小东西 就是 我们在处理行内块级元素 如果元素中添加了文字话 就可能出现对不齐的问题。这个就是因为文字对齐的基准 不同导致。原创 2022-09-07 15:06:24 · 824 阅读 · 0 评论 -
css 实现渐变色字体
css实现渐变色字体原创 2022-06-23 11:01:46 · 393 阅读 · 0 评论 -
vue3 中使用图片播放器
vue图片播放器原创 2022-06-20 17:09:27 · 623 阅读 · 0 评论 -
ios 0.5px出现边框丢失的问题
ios 0.5px边框丢失问题原创 2022-06-17 15:40:08 · 1104 阅读 · 0 评论 -
一行css代码让整个网站变灰, 通过js控制定点触发和关闭
今天是5.12是个特殊的日子,有的时候吧 会把整个网站变灰的需求这个我们用css过滤器 一行代码就能实现了filter: grayscale(100%);问题是 出在定点触发 这块,我们可以通过js 来实现核心就是时间的判断这块比如: 我们要在5.12凌晨十二点触发 到 5.13的凌晨关闭就可以这样写// 原生js 在三大框架中 都可以直接拿过去使用let nowTime = new Date().getTime(), overTime = new Date("2022/05/原创 2022-05-12 09:11:23 · 1349 阅读 · 0 评论 -
使用css渐变色。实现动态进度条效果
基本上现在的ui框架都有自己的进度条组件封装 但是有的时候我们需要自己定制的时候 还是比较麻烦比如下面的这个效果双色进度条 贴合 效果。可能有点业务会用到吧就是使用渐变色和 动画的效果实现, 第二个进度条动画延迟 一点就可以和第一个贴在一起了animation-delay: .1s; 这个可能童鞋用的比较少// 还有就是渐变色的描述background-image: linear-gradient(45deg, #FF4B00 25%, transparent 25%, transpare原创 2022-04-13 10:14:48 · 1645 阅读 · 4 评论 -
uniapp文本支持换行，后端返回一串文本
怎么说呢。view标签是不支持的，因为接口返回的文本中函数 \n 换行的提示的这样说我们得找一个支持换行的才行text标签是支持 换行的。所以<text>这里放你的文本就行了</text>关注我 持续更新 前端知识...原创 2022-01-25 09:37:51 · 1820 阅读 · 3 评论 -
css absolute绝对定位 让 top 和bottom 同时生效
只要你的元素没有设置高度就可以 实现。可以用来处理一些响应式的页面处理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia.原创 2022-01-17 17:05:40 · 843 阅读 · 0 评论 -
弹性布局 怎么让某一列自适应元素内容的宽度
哎。怎么说呢 建议使用网格布局display: grid;grid-template-columns: repeat(3, auto);搞定。关注我 持续更新 前端知识原创 2022-01-10 16:01:19 · 310 阅读 · 0 评论 -
css 实现最后一行两侧对齐，考虑ios text-align-last 不支持iOS
经常可能要做到这种展示效果。用来标注个中标签介绍啥的但是 会出现某一行。文本过长的话 就是这样的效果 看起来很难受因为使用的弹性布局 随便左侧我们固定的高度。但是还是会往左边进行挤压导致很难受这个时候 我们需要给右侧的元素加上一个。flex: 1. 让他自适应 就可以了.desc { flex: 1; }其实文本两侧对齐通过一个c s s属性即可实现。text-align-last: justify;但是吧。这个属性 ios 又不支持。这个就又不舒服了我们也只能通过 空.原创 2021-12-29 18:26:51 · 3555 阅读 · 7 评论 -
react 制作一个 从顶部划出的浮层。demo
这个可能更多的就是css样式上的书写，js上很简单就是个状态的控制封装一个 FloatTop.jsximport "./index.scss"const FloatTop = ({ children, showMask, handleChange}) => { return ( <div className="float-container"> <div className="content"> .原创 2021-12-29 16:06:16 · 659 阅读 · 0 评论 -
css 实现多行文本展开收起操作 兼容ios。 以及vue实现 两种方式
多行文本的省略和隐藏。其实在ios上面还是会有兼容性问题 惨不忍睹，做不到 在文本末尾实现 文字环绕 展开的那种方式 只能通过css的其他的方式来处理，这个展开的问题 本来就是前端处理中的一个难题。 哎 想在短时间处理和各个平台的兼容性还是不容易。 在这个做个笔记。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA原创 2021-12-25 14:56:00 · 2445 阅读 · 2 评论 -
原生js修改元素样式的几种方式
用惯了vue和react之后可能会慢慢淡忘掉原生的一些操作dom的几种方式，有的时候确实需要我们通过原生的方式进行操作。今天就说几个 通过原生j s方式修改样式的方法最简单的就是 直接dom.style如果是 长一点的属性名字的话 是通过 驼峰的写法比如。“backgroun d-color” => backgroundColorvar bottom = document.querySelector('#bottom');bottom.style.backgroundColor = '#原创 2021-12-20 14:11:14 · 24539 阅读 · 0 评论 -
设置弹性布局，中间内容自适应宽度
其实这样的布局又叫做双飞翼布局，两侧不变中间在动在没有弹性布局的时候，就是通过浮动来实现的有了弹性布局之后 就可以快速实现了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content原创 2021-11-22 21:47:54 · 652 阅读 · 0 评论 -
vue封装一个 从顶部滑出的浮层小组件, 原生和react都可以仿照做出来
先看下效果哈，相信这种效果业务中还是比较常见的，因为吧pdf最大只能上传5M的大小，所以稍微动下就要超过了，所以录制的时候我点的很快。将就着看吧。毕竟代码才是关键 哈哈。效果就凑合着看大部分情况下。ui组件会给我们封装好的，但有些还是得需要我们自己写了其实当你了解了简单的原理之后其实还是很简单的就实现了呢FloatTop.vue 组件。可以直接拿去使用哈<template> <div class="container"> <div class="cont原创 2021-11-12 15:33:40 · 1056 阅读 · 0 评论 -
css实现 快速定位父元素下最后面的几个子元素，匹配选择最后几个子元素
这样的业务还是会有的 特别的一些动态数据，因为前面的几个数量不定，但是后面几个是固定的这个时候，就需要我们能不能固定选中后面几个元素了比如。选中后面三个元素。 其实我们可以通过css来实现了 很简单的 核心代码就是nth-last-child(n) 这个伪类选择器的运用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="原创 2021-10-30 16:42:25 · 2256 阅读 · 0 评论 -
设置弹性布局的三列两侧对齐，最后一行样式的处理
我们在实际的业务中，经常会做比如下面的情况三列，如果我们不用弹性布局 用传统的布局来解决的话，浮动，然后就是设置元素的外边距，但是不管你怎么设置总会差点意思，不是这边多了就那边有换行很难受。这个时候 我们会选择弹性布局，会让我们比较舒服点吧然后两侧对齐div{ display: flex; justify-content: space-between;}但这个会有一个问题就是 最后一行不足三个的时候 ， 会搞一个左右两侧各一个， 这个让我们很头疼.parent {原创 2021-10-18 17:36:36 · 1191 阅读 · 2 评论 -
css 实现单行文本两侧对齐
相信这样的业务还是很容易碰见的。首先小伙伴会想到的就是 text-align justify但这个东西加上之后会发现没什么效果。也并不是完全没有效果 只是 他是会在多行的的文本的时候会出来 效果这个时候我们可以采用另一个属性样式。text-allign-lastCSS 属性 text-align-last 描述的是一段文本中最后一行在被强制换行之前的对齐规则。我们加上之后看下效果div p { width: 100px; text-align-last: justify;}.原创 2021-09-25 14:38:06 · 388 阅读 · 0 评论 -
修改taro-ui的样式，在自定义组件中使用taro-ui，修改ui框架样式
其实修改ui框架的样式还是很容易碰见的，但是每个框架处理的方式可能还有点不太一样，taro编译出来的小程序样式。addGlobalClass 添加这个 只能让我们修改页面中的taro-ui 样式 但是在自定义的组件中 怎么修改呢其实也简单， 首先taro-ui中修改样式 我们直接找到那个 类名进行覆盖就行了，注意 不是在组件的样式文件中， 是必须在page页面的样式文件中进行样式覆盖关注我 持续更细前端知识。...原创 2021-09-24 11:25:32 · 4495 阅读 · 0 评论 -
将stylus 样式 转换成sass,scss
因为有一个项目使用的是 stylus. 后来的项目使用了 scss, 但是很多样式代码都可以共用的， 就是格式不太一样 要是一点一点来转化 就累死了就想着网上找到一个工具也可以 能实现快速转换没想到还真有npm install -g stylus-convertermacsudo npm install -g stylus-converter然后 直接在那个文件下stylus-conver -i demo.styl -o demo.scss转出来 可能还得需要你调整下， 但是 能正常原创 2021-09-03 19:51:19 · 1653 阅读 · 4 评论 -
css中让文本显示到 元素的底部
div { height: 100px; width: 200px; border: 1px solid #f00; display: table-cell; vertical-align: bottom; }<div> hello world <span>1111</span> </..原创 2021-08-25 16:34:50 · 5372 阅读 · 0 评论 -
粘性定位，子元素在父元素内部实现 固定定位
有这样的场景，其实还是用的比较多的，就是我们的元素可能是相对于父元素 是固定的，特别是滚动的情况下， 希望 子元素 一直在父元素的某个位置 保持不动这个时候就用到了 粘性定位 position: sticky;有这样的一个效果就是 子元素在父元素的顶部，当父元滚动的时候 照样还是停留在 顶部div { height: 2000px; background-color: #f00; position: relative; margin-top: 50px; } .c原创 2021-07-18 14:38:51 · 3192 阅读 · 0 评论 -
css3中的 columns 样式属性，以及通过columns 来快速实现瀑布流布局
c3 新增的样式 属性 columns 见过这个属性的小伙伴应该不多吧，用过的也应该不多，因为平常的业务中可能用不到， 或者见到相关业务 会首先 想到了 弹性布局columns 是 column-width 和 Column-countcolumn-width : 100px;设定每列的宽度 为 100pxColumn-count: 3;div元素的文本分成三列。Column-gap: 30px;在div元素的文本分成三列，并指定一个30像素的列之间的差距。记住 是 设置块内的原创 2021-05-22 20:04:58 · 820 阅读 · 0 评论 -
css 文本两端对齐
text-align: justify;react 写法 是textAlign: 'justify'；继续 码代码了原创 2021-04-29 14:49:47 · 115 阅读 · 0 评论 -
前端CSS布局中什么是BFC，初级前端开发人员还是简单了解下比较好！浅谈BFC块格式化上下文
上周从公司离职了，然后开启了求职之路。 碰见了一家不错的公司，说实话还是比较心动的。但面试的时候，关于框架的东西都不问，怼着基础的东西问的很"深入"，把看了两天的vue3源码的我给搞蒙了其中两道就是 关于css中的BFC规范，不过在这里再扯一下 有几个问题很有意思css属性的 rgba 是css3 新增的属性吗？ 我回答错了， 答案是 是css3的东西js 和 flash的通过那个方法进行交互的 原谅我没有用过flash 这道题我答不上来还有就是 如果文档...原创 2021-03-24 16:15:51 · 269 阅读 · 0 评论 -
动态生成css链接，动态插入css文件
function insetCss() { var head = document.querySelector('head'); var link = document.createElement('link'); link.href = "./assets/css/demo.css"; link.rel = "stylesheet"; link.type = "text/css"; .原创 2021-03-16 14:56:18 · 443 阅读 · 0 评论 -
使用绝对定位或弹性布局实现顶部导航栏固定效果,css知识温习
头部固定 和底部菜单固定 中间内容滚动的效果 还是 比较常见的 我们先来看下效果吧看到上面的效果 可能很多大佬不会像我这菜鸟一样 想到用 fixed 固定定位 但大神给我提供了一种新的解决方法就是通过固定定位 和 弹性布局来实现这个效果 说实话吧 固定定位 在手机端浏览器还是少用小心被当作广告屏蔽了哈1 . dom结构就很简单<div class="container"> <header> 顶部消...原创 2021-03-12 09:50:38 · 2003 阅读 · 2 评论 -
pre 标签 中文字太长 不换行 怎么办
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。pre { white-space: pre-wrap;}关注我 持续更新前端知识原创 2021-02-09 11:18:27 · 1316 阅读 · 0 评论 -
css实现遮罩层高斯模糊，毛玻璃效果
突然设计搞了一种想法，当遮罩层谈起来的时候，能不能搞一种模糊让用户看不清遮罩层下面的内容然后ui小姐姐说，要是做不出来 就不做了，我说能做出来，怎么能让ui小姐姐看不起呢先看下 加模糊滤镜之前的效果然后加上模糊滤镜之后的效果呢是不是很不一样呢其实滤镜这个东西很多前端小伙伴都知道这个东西filter 属性 则是 blur 单位是 px 其实上面的我设置了 5px 都很模糊了都知道这个东西 但是 一次性就加成功 可能有点困难哈<section>...原创 2021-01-25 17:57:12 · 4570 阅读 · 3 评论 -
css中消除某一个样式属性的影响
其实这个主要是在 我们使用第三方ui框架的时候 覆盖他们本来的样式属性但有的时候 需要我们消除某一个属性的影响并不是覆盖它 (其实本质还是覆盖 哈哈哈)举个例子吧 想让某个属性不起作用left: unset;div { position: absolute; left: unset; right: 0, top: 10px;}...原创 2020-12-31 09:09:23 · 1395 阅读 · 2 评论 -
css 选择器 如何 选择 大于 N 的情况 ？第n个元素之后的情况
我们可以 通过 nth-child 选择 第几个子元素 但是要做到 大于 第n的元素 怎么做的 其实 我们可以通过配合 实现呢 假设 我把大于 第二个元素 也就是从第三个开始 都是红色 样式上来实现就是div:nth-child(2) ~ div 核心 就是这个的配合.parent div:nth-child(2) ~ div { background-color: #f00; }我们看下 实际效果 是不是 实现了 其实 还...原创 2020-12-28 20:48:54 · 5624 阅读 · 0 评论 -
通过css 设置 谷歌浏览器 字体小于 12px
哎 那个奇葩 提出来的这个需求 设置个 10px 用户还不趴在电脑上 看其实吧 谷歌 默认设置 最小字体就是 12px 默认是 16px就算你通过 font-size 设置 10px 但是 谷歌上是不生效的 看到的还是 12px但是 在ie上是可以设置成功了 第一次 感觉 ie 还是 不错的 但是这种不错总觉得怪怪的 哈哈在 谷歌上 我们可以通过缩放 来变相 实现 字体缩小的功能transform: scale(0.625); 通过transform ...原创 2020-12-22 09:40:10 · 1074 阅读 · 0 评论 -
解决 overflow:hidden 在IOS 上 失效的问题
其实 业务上经常会出现 在浏览器弹出一个 提示框 让用户输入一些东西但是把 如果后面的 元素还能滚动的话 就给人一种 很不爽的感觉建议 弹窗出现的时候禁止 body 内容滚动 用户体验就更好了body{ overflow:hidden;}让弹窗出来 设置 body的样式 overflow:hidden弹窗消失的时候 再让body { overflow:auto};这个我再 谷歌的模拟器上 挺好的 然后 使用微信自带的浏览器也是好端端的但是测试那边 拿着收集自带的 和 一些其他原创 2020-09-09 15:07:15 · 3520 阅读 · 9 评论 -
网页设计,一个元素四个边角加上一个直角
当然哈 可以让ui 给 但是 有的时候 ui不在 我们可以尝试着自己画出来 还可以提高下自己的css 水平 何乐而不为呢通过伪类的方式生成 但是把 一个元素 只有一个 before 和after 伪类 但是 四个角都需要 所以 里面还得加一个div 然后再 用加的那个div进行伪类生成 就可以了 实现四个角就行了<div class="panel bar"> <div class="pannel-footer"></div></di.原创 2020-08-20 17:50:47 · 925 阅读 · 0 评论 -
css文件中 引入字体文件并且在 页面中 引入使用
下载字体文件到本地 定义并且引入字体@font-face { font-family: electronicFont; src: url('./DS-DIGIT.TTF');}然后就可以使用了p{ font-family:"electronicFont";}原创 2020-08-20 15:33:18 · 1221 阅读 · 0 评论 -
css,让一个元素四周有阴影，css边框加阴影
很多童鞋都会想到css3中的一个样式属性 box-shadow 但是 看他的介绍好像实现不了啊box-shadow: h-shadow v-shadow blur spread color inset;、box-shadow: -10px -10px 0px #666; 这样是肯定不可以的 但是 很多人可能不知道 这个属性是可以多写的 往后面可以继续进行书写描述的其实是可以 多写的div:hover{ box-shadow: 0px -10px 0px 0px #ff0000, /原创 2020-08-19 18:00:06 · 2271 阅读 · 0 评论 -
利用为类生成器，给div上添加一个出头的小三角
还是废号少说直接上效果图这里你可以选择 after 也可以选择 before 看自己喜欢哈<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con原创 2020-05-11 21:17:11 · 742 阅读 · 0 评论