![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
CherryCola_zjl
enjoy it
展开
-
rotateY定位元素无法遮盖
页面上有一个3d的转动元素,再加弹窗发现遮盖不住。z-index怎么设置都无效,改为transformtranslateZ(999px)即可。可以理解为2d平面用z-index,3d用z轴位移区分上下层。原创 2022-07-15 16:17:20 · 308 阅读 · 1 评论 -
css实现3d翻转效果
直接看代码!.outbox{ perspective:300px; /* 脱离平面屏幕束缚,元素离观察者眼睛的距离, 只能用在3d动画 */ -webkit-perspective:300px; } .inner{ transform-style: preserve-3d; /* 动画方式 3d */ -webkit-transform-style: preserve-3d; transition: 1s ease-in-out; /* 运动速度,变速运动原创 2021-09-29 17:50:49 · 1128 阅读 · 0 评论 -
修改element ui
选择框 el-checkbox // 分 选中 hover 选中 获取焦点 四个状态 .el-checkbox__input.is-checked .el-checkbox__inner{ background-color: #00bb5a; border-color: #00bb5a; } .el-checkbox__inner,.el-checkbox__inner:hover{border-color: #00bb5a;} .el-checkbox__i原创 2021-08-14 22:58:00 · 204 阅读 · 0 评论 -
css小细节
/** 移动端隐藏滚动条*/.hideScrollbar::-webkit-scrollbar{ display: none;}/** 去除 移动端点击黑色阴影效果 */*{-webkit-tap-highlight-color:transparent;}原创 2020-09-23 17:44:58 · 216 阅读 · 0 评论 -
css字体流光
<p>字体流光</p>@-webkit-keyframes masked-animation { 0% { background-position: 0 0 } to { background-position: -100% 0 } } .com-loading-text { text-align: center; font-weight: 800; font-size: 40px;原创 2020-06-10 16:39:42 · 475 阅读 · 0 评论 -
iphone app内嵌网页高度100%问题(底部有白条)
蓝色div,紫色body(高度均为100%)黑色fixed定位bottom:0 。发现元素无法填满,定位也到不了底部。百思不得其解。在一整天的 调试过后,终于发现了奥秘首先,你的页面meta标签要设置正确,最主要的就是 viewport-fit=cover<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=原创 2020-05-14 17:39:24 · 2321 阅读 · 0 评论 -
父元素flex:1子元素height:100%失效的解决办法
子元素设置height:100%,会发现高度并没有变化。网上搜了半天也没解决办法,就写一下通过设置父元素height:0; 同理 width 。这个方法还能解决 flex:1 超出省略号css失效。 这个方法safari浏览器目前还不兼容,但是chrome有效/* 父元素 */.parent{height:0;}父元素 与 子元素 通过定位解决。/* 父元素 */.paren...原创 2020-04-21 11:28:27 · 11641 阅读 · 1 评论 -
哀悼日,让我们的网页变成灰色
body {-webkit-filter: grayscale(100%); / webkit */-moz-filter: grayscale(100%); /firefox/-ms-filter: grayscale(100%); /ie9/-o-filter: grayscale(100%); /opera/filter: grayscale(100%);filter:progid:DXIm...原创 2020-04-04 00:27:53 · 330 阅读 · 0 评论 -
html模板打印
DPI: 每英寸的像素点打印机里的DPI是指打印分辨率,指的是打印机在每英寸可打印的点数。/* css 可控制打印时的样式 */@Media print{ }/ * @page 打印文档时修改 margin,orphans,widow 和 page breaks of the document(分页符)。 *//* @page :first 伪类选择器 描述的是:打印文档的时候,第一...原创 2020-01-16 10:12:14 · 1291 阅读 · 0 评论 -
移动端完美适配方法
采用 vw + remrem(font size of the root element)是指相对于根元素的字体大小的单位。vw是可视窗口的宽度单位,不受设备分辨率影响, width: 1vw = width: 1%。倘若 浏览器宽1000px,1vw = 10px移动设备的原型图一般都是二倍图(宽750px)// 750/7.5 = 100 即 1rem = 100px,原型图上的 p...原创 2020-01-13 18:48:16 · 810 阅读 · 0 评论 -
css 字体间距缩进 css
text-indent 设置抬头距离css缩进letter-spacing 字间距原创 2019-02-28 18:28:16 · 1329 阅读 · 0 评论