css
前端小狮
can you feel my world . . . . . .
展开
-
ie下keyframes动画不支持background-image的变化
如题,ie下keyframes动画不支持background-image改变的动画,用background-position会有感觉衔接不顺的问题就先用opacity 和 position来实现(如要兼容低版本ie,就加上filter:alpha写法)。<div class="wt-posrel wt-inlineblock ht-t26"> <button type="button" class="waver-red-white"> 1 &l.原创 2020-12-25 17:36:14 · 350 阅读 · 0 评论 -
CSS实现隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。方法1:计算滚动条宽度并隐藏起来在本站的侧栏,你可以看到前端日报的那块内容并没有滚动条,但鼠标移上去却可以滚动内容。这是什么技术呢? 其实我只是把滚动条通过定位把它隐藏了起来。<div class="outer-container"> <div class="inner-container转载 2020-11-05 18:00:28 · 3815 阅读 · 0 评论 -
IE和谷歌的滚动条可自定义样式的属性
//IE专属的滚动条样式定义,只能设置各种原始结构的颜色,宽高结构等其他样式无法修改;div{ scrollbar-arrow-color: red; /*三角箭头的颜色*/ scrollbar-face-color: green; /* 立体滚动条的颜色(包括箭头部分的背景色) */ scrollbar-3dlight-color: blue; /* 立体滚动条亮边的颜色 */ scrollbar-highlight-color: #ddd; /* 滚动条的高亮颜色(左阴影?转载 2020-08-28 17:00:59 · 139 阅读 · 0 评论 -
position: sticky;粘性定位
想整个滚动条插件,但是里面的元素如果用absolute定位的话,会跟随滚动条滚动,fixed也不好用,偶然查到position: sticky;,确实可以解决这个问题(但兼容很差),先谷歌用着吧position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;.原创 2020-08-28 16:41:24 · 659 阅读 · 0 评论 -
兼容ie10及以上,谷歌等的等高flex自适应写法
单纯的只有一层的话很简单好写,display:table也可以,以下为 li (只是个例子标签,不重要)下面多个几层还能实现其它自适应,小细节忽略*{ padding: 0; margin: 0; box-sizing: border-box; } .wt50{ width:50%; } .wd135{ width:135px;...原创 2019-12-18 17:35:14 · 463 阅读 · 0 评论 -
存个记录css兼容,谷歌、ie11、ie10
//存个记录()//谷歌@media screen and (-webkit-min-device-pixel-ratio:0){ }/* ie11 */@media all and (-ms-high-contrast:none){}/* ie10 */@media screen and (-ms-high-contrast: active), (-ms-high-co...原创 2019-12-03 11:08:15 · 292 阅读 · 0 评论 -
关于HTML5中Canvas的宽、高设置有关问题
Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法:方法一:1 方法二:使用HTML5 Canvas API操作 OK1 var canvas = document.getElementById(‘欲操作canvas的id’);2 canvas.width = 500;3 canvas.width = 500;若通过如下方法设置宽高,那么Canvas元...转载 2018-12-25 14:59:34 · 2419 阅读 · 0 评论 -
通过css设置文字不能被选中
通过简单的css设置页面的文字无法被选定。我不能被选中复制.select{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}通过上面的css就能设置,div里面的文字不能被选中复制。转自:https://blo...转载 2019-01-04 11:23:58 · 2741 阅读 · 0 评论 -
css3实现漂亮的倒影效果
实际上还有很多CSS新属性并未包含进CSS3官方标准中。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect的作用是让图片出现倒影。如果一个图片,我们想要给其增加倒影,做法如下:html:<img src="images/7.jpg"/>css样式:img{ -webki...转载 2018-12-29 16:02:25 · 1603 阅读 · 0 评论 -
display:table-cell;内容超出隐藏,table,td内容超出隐藏
display:table-cell;内容超出隐藏,和 table 标签一样 需要设置 table-layout: fixed;超出… white-space: nowrap;text-overflow: ellipsis;overflow: hidden; (需要有宽度); <style> .tb-list{ display: table; tab...原创 2018-11-09 17:29:53 · 4602 阅读 · 0 评论 -
sass中常用的mixin
//-----------------------------------浏览器前缀----------------------------------------- //例子:@include css3(transition, 0.5s); @mixin css3($property, $value) { @each $prefix in -webkit-...转载 2018-07-11 18:32:10 · 1467 阅读 · 0 评论 -
display:table;自适应列表,自适应高度,内容水平垂直居中
display:table; 兼容 ie8 及以上,和表格元素table ,tr , td,相同特性;由于flex布局兼容在10ie及以上,因此有时候可能需要用到://属性说明table 此元素会作为块级表格来显示(类似 &lt;table&gt;),表格前后带有换行符table-row-group 此元素会作为一个或多个行的分组来显示(类似 &lt;tbody&gt;)ta...原创 2018-06-07 15:03:35 · 8633 阅读 · 0 评论 -
rgba半透明背景兼容ie8,filter滤镜半透明写法
在一个页面中设置一个半透明的白色div。这个常规写法用rgba,只需要给这个div设置如下的属性即可:background: rgba(255,255,255,.1);但是要兼容到ie8。这个就有点蛋疼了。因为ie8不支持rgba()函数。下面我们总结一下rgba()函数的含义。rgba的含义,r代表red,g代表green,b代表blue,红绿蓝是三原色。 所有颜色都可以由这三...转载 2018-04-04 11:35:01 · 543 阅读 · 0 评论 -
text-overflow: ellipsis;单行,多行文本溢出显示 . . .
常见的单行文本溢出显示省略号 写法:text-overflow: ellipsis;overflow: hidden;white-space: nowrap;<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></ti..原创 2018-04-11 15:01:18 · 32133 阅读 · 1 评论 -
select默认下拉箭头改变、option样式清除
谷歌、火狐、ie下 select 的默认下拉箭头图标差别还是比较大,一般我们都会清除默认样式,重新设计箭头图标;/* --ie清除--*/select::-ms-expand{ display: none; }/* --火狐、谷歌清除--*/select{ appearance:none; -moz-appearance:none; -webkit-appearan原创 2017-08-25 16:36:58 · 52083 阅读 · 2 评论 -
input输入框自动填充的黄色背景简单办法
谷歌chrome表单自动填充后,input文本框的背景变黄色,这是谷歌的私有属性input:-webkit-autofill引起;input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000;};//并且这个样式没法用 !important 优先级覆盖掉简单原创 2017-08-25 16:08:14 · 1950 阅读 · 0 评论 -
移除除input type="number"在不同浏览器下的箭头
<input type="number"/>**type="number"在谷歌 、火狐下默认都会出现上下的箭头,工作中为了浏览器统一样式一般都需要移除这个箭头;****//火狐下的移除input[type=number] { -moz-appearance:textfield;}//谷歌下的移除input[type=number]::-webkit-inner-spin-bu原创 2017-08-25 15:27:34 · 2956 阅读 · 0 评论