css
sa酱
这个作者很懒,什么都没留下…
展开
-
safe area
<meta name="viewport" content="viewport-fit=cover" />body { padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px padding-left: constant(safe-area-inset-left); //如果未竖屏时为0 padding-right: constan.原创 2021-02-25 10:12:00 · 346 阅读 · 0 评论 -
微信小程序-改变switch/radio/checkbox等组件的大小
微信暂时没有提供这些组件大小的调节。可以用样式transform:scale(0.8)来调整原创 2020-05-15 11:26:22 · 446 阅读 · 0 评论 -
全网站变灰,公祭日活动界面如何实现?
html { -webkit-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}第一行是基本实现,第二行针对IE的浏览器。补充,ie10 11不兼容老ie的activex方式原文链接...原创 2020-04-07 11:45:21 · 706 阅读 · 0 评论 -
特别的/高冷的/金属感的/css3/loading效果
等边三角形,每条边单独进入,转圈圈的纯css实现现在画三角形多半是通过宽高为0的元素,用border来实现的,但是产品说:“想要一条线一条线单独出来,有一种连线的感觉”哦....不知道怎么录gif反正是这个三角形连线出现 然后一直在转圈圈。先写html。<div class="whiteTriWrap"> <div class="rotate...原创 2019-09-27 17:41:05 · 259 阅读 · 0 评论 -
css 修改scrollbar样式
滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深。 滚动条的css样式主要有三部分组成:1、::-webkit-scrollbar 定义了滚动条整体的样式;2、::-webkit-scrollbar-thumb 滑块部分;3、::-webkit-scrollbar-thumb 轨道部分;...原创 2019-01-10 12:04:28 · 1775 阅读 · 0 评论 -
bootstrap.css和esayUi.css样式冲突的解决
在使用bootstrap和easyui的时候,发现很多有冲突的地方,包括datagrid控件和combo等,以下进行的问题修正,保证easyui正常显示原理就是还原easyui中的默认设置,让bootstrap的作用域不在easyui控件定义的css范围内。 /*bootstrap兼容问题和easyui的bug*/.panel-header, .panel-body {bord...转载 2015-09-25 22:50:08 · 10990 阅读 · 5 评论 -
垂直居中
之前一直用的absolute定位然后高度写死,再用负值margin。现在主要用flexmain { display: flex; align-items: center; justify-content: center; width: 18em; height: 10em;}今天发现还有absolute定位,left top 50%...原创 2019-01-04 17:33:04 · 118 阅读 · 0 评论 -
如何在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案,都还存在一定的缺陷。言外之意,还没有哪一个方案是完美的。事实上真的不完美?其实不然。最近为...转载 2018-11-09 11:37:46 · 233 阅读 · 0 评论 -
CSS3 动画卡顿性能优化解决方案
https://segmentfault.com/a/1190000013045035在使用css3 transtion做动画效果时,优先选择transform,尽量不要使用height,width,margin和padding在使用height,width,margin,padding作为transition的值时,会造成浏览器主线程的工作量较重,例如从margin-left:-20px...转载 2018-08-07 09:21:04 · 4564 阅读 · 0 评论 -
web手机端之rem自适应
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clien转载 2017-01-12 16:25:22 · 353 阅读 · 0 评论 -
less循环生成类
下面就是一个用于生成 CSS 栅格类的递归循环的实例:.generate-columns(4);.generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1));}输出:.column-1原创 2017-01-17 15:28:44 · 4377 阅读 · 0 评论