
css
文章平均质量分 61
梓喻
公众号IT民工日常求关注,我们有好多IT民工群,一起来划水呀~~~
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
iframe窗体默认白色背景去除
解决iframe加载时白色闪屏问题的方案 针对深色背景系统中iframe加载时出现白色闪屏的问题,文章提出以下解决方案: 设置iframe背景透明:通过CSS设置background-color: transparent 允许透明属性:在iframe标签添加allowtransparency="true" 加载时显示优化:使用visibility:hidden配合onload事件,待加载完成后再显示 最终方案同时应用以上三种方法,确保在不同环境下都能有效解决问题。原创 2025-06-24 23:43:49 · 408 阅读 · 0 评论 -
css使用clip-path属性切割显示可见内容
使用css属性clip-path可以裁剪很多奇形怪状的内容显示,也不需要额外的元素或者特殊处理,简单实现一些箭头、控制显示内容等。原创 2025-05-20 18:40:28 · 654 阅读 · 0 评论 -
css使用mix-blend-mode的值difference实现内容和父节点反色
CSS mix-blend-mode属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。原创 2025-04-08 00:42:04 · 350 阅读 · 0 评论 -
bootstrap模态框modal被遮罩层挡住问题处理
先从modal的配置中移除遮罩层<!-- 需要在外面的modal需要设置参数data-backgrop为false,这样就不会显示遮罩层了 --><div class="modal" id="topMenu-modal" tabindex="-1" role="dialog" data-backdrop="false"> <div class="modal-dialog" role="document"> <div class="m.原创 2022-03-18 12:08:15 · 4287 阅读 · 0 评论 -
placeholder样式处理
伪元素::placeholder可以选择一个表单元素的占位文本,它允许开发者和设计师自定义占位文本的样式。::placeholder{}::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */:-moz-placeholder{} /* Firefox版本4-18 */::-moz-placeholder{} /* Firefox版本19+ */:-ms-input-place.原创 2021-12-07 17:38:15 · 210 阅读 · 0 评论 -
垂直居中的奇思妙想
首先感谢【张鑫旭】这位大神的无私奉献,从浮动到各种css神技巧以及他独特的技术解释,我觉得写代码也可以这么开车。。。CSS2 的 vertical-align 用于属性设置元素的垂直对齐方式,在这里用于设置同一行的元素都放置在父元素的中部。父元素通过固定定位默认宽高100%,且内容通过 text-align 设置居中,通过设置 font-size 控制子元素文字默认大小,然后设置 white-space 控制行内元素不换行,最后设置overflow 可以在子元素超出之后可滚动。子元素通过伪元素原创 2020-12-07 11:28:16 · 161 阅读 · 2 评论 -
单行文本溢出省略以及多行文本溢出省略css实现方式
单行文本 省略需要用到 text-overflow 属性.one-line{ width: 100%; /* 宽度固定,高度只有一行,不能换行就进行下一步省略了 */ overflow: hidden; /* 必须超出修剪 */ white-space: nowrap; /* 确保文字不换行 */ text-overflow: ellipsis; /* 文字超出就省略 */}w...原创 2019-12-04 14:26:50 · 465 阅读 · 0 评论 -
css3之音乐抖动条
<style type="text/css">.box{ margin:100px auto; width:300px;}.box .pillar{ display:inline-block; width:20px; height:20px; background-color:#06c; animation:scaleY .6s infinite; transfo...原创 2019-12-03 15:29:21 · 675 阅读 · 0 评论 -
css3 animation实现动态波浪
首先效果如图animation 属性是一个用于设置css动画的简写属性。<style type="text/css">.wave{ width:100px; height:100px; border-radius: 100px; background:#06c no-repeat center center; ...原创 2019-11-20 19:41:49 · 1111 阅读 · 0 评论 -
透明度对应16进制表及透明度兼容写法
颜色透明度和十六进制对应的表格透明度16进制100%095%0D90%1A80%3370%4D60%6650%8050%8045%7340%6635%5930%4D25%4020%3315%2610%1A5%0D0%00用渐变写透明...原创 2019-02-27 21:11:53 · 736 阅读 · 0 评论 -
文字两端对齐大杀器text-align:justify;
常用的text-align我们用的蛮多的一般是left、center、right,但是还有一个属性justify可能不是很熟悉。justify实现的是文字两端对齐,但是对最后一行无效,也就是说,不管你的文字有多少行,最后一样是不会两端对齐的。另外,如果文字只有一行,那么也是最后一行,同样不生效。好像,如果不是最后一行就生效了对吧那么解决思路很简单了,一个占位的文本节点或者行内元素,只要看不到...原创 2019-01-17 12:18:23 · 1520 阅读 · 0 评论 -
js、css设置不可选中用法
我们在项目中常常会遇到一些内容不希望被用户选中,最简便的方法便是css,也可以通过js来实现效果css使用属性user-selectuser-select是一个css属性,控制用户能否选中文本,如果不希望选中可以使用参数none来设置,使用时记得加前缀body{ -moz-user-select:none; /* 火狐 */ -webkit-user-select:none; /* 谷...原创 2018-12-12 14:01:10 · 6639 阅读 · 0 评论 -
css实现三角形
我们很多时候都需要一些小图标小的icon什么,每次要img还得加载比较麻烦,用css就简单方便多了实现三角形有两种思路,一种是border,一种是transform中的rotateborder先认识盒模型marginmargin area用来分隔相邻的元素,上下注意外边距融合,是透明空白区域,可以outline、box-shadow等等效果border顾名思义,就是围绕内边距和内容...原创 2018-12-17 11:43:19 · 658 阅读 · 0 评论