Atwood定律:凡是能用JavaScript写出来的,最终都会用JavaScript写出来

 

如何让网页变灰 CSS3 filter(滤镜) 属性

代码示例:html{ -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale(100%); filter:url("data:image/svg+xml;utf8,#graysc
ngtwewy 2020-04-04    CSS   

CSS 实现三角形

将一个div的宽度和高度设置为0,然后设置边框样式.triangle{ width: 0; height: 0; border-top: 50px solid black; border-right: 50px solid red; border-bottom: 50px solid green; border-left: 50px solid blue; } 将一个div的bor
ngtwewy 2020-03-17    CSS   

rem 单位手机页面适配

物理像素:顾名思义,就是设备屏幕上的实际像素。也就是说这个手机被出厂造出来的时候,这个屏幕上有多少个像素点,他的物理像素就是多少;设备独立像素:也叫做逻辑像素(对于前端来说,和我们的css像素是一样的),这个不同的设备是不一样的。在viewport为ideal-viewport模式时, 如iphone6此时的viewport为375px,代表着我们在css中写375px就可以达到全屏的效果;在移动
ngtwewy 2019-11-26    CSS   

排除选择器

css :not()排除函数css:not()函数用来排除选择,not(x),其中的x为css选择器,但是x不能是not选择器,也就是说:not()排除选择器不能嵌套使用。css:not()排除选择器使用.sibcont{ background:#f1f1f1; border:1px solid #bababa; margin:20px; padding:20px; } .sibcon
ngtwewy 2019-11-16    CSS   

SCSS 快速上手

编码规则SASS首先会检查代码文件的Unicode BOM(byte order mark),然后是@charset声明,再然后是底层运行Ruby的字符串编码,如果这些都未进行设置,将会默认以UTF-8编码输出CSS文件。@charset 'utf-8'; #app { background: url('../assets/背景图片.png'); } 建议代码开头位置显式定义@charse
ngtwewy 2019-10-05    CSS   

CSS动画-旋转球

/*!Loading CSS*/ #contain { width: 300px; height: 100px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; m
ngtwewy 2019-03-30    CSS   

Bootstrap 3.7 导航组件响应式CSS样式

.navbar{ margin-bottom: 0px; background-color: #fff; border-right: 0px; border-left:0px; border-radius: 0px; } .navbar-brand { padding:10px 15px; } .navbar-brand img
ngtwewy 2019-03-02    CSS   

使用 linear-gradient 创建渐变背景色的背景

.page-header { color: #fff; text-align: center; background-color: #5FC3E4; background-image: linear-gradient(120deg, #E55D87, #5FC3E4); } CSS linear-gradient() 函数 gradie
ngtwewy 2019-01-06    CSS   

Normalize.css 和 CSS Reset 的区别

CSS Reset 是革命党,CSS Reset 里最激进那一派提倡不管你小子有用没用,通通给我脱了那身衣服,凭什么你 body 出生就穿一圈 margin,凭什么你姓 h 的比别人吃得胖,凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动,把人家全拍扁了。看似是众生平等了,实则是浪费了资源又占不到便宜,有求于人家的时候还得贱贱地给加回去,实在需要人家的默认样式了怎么办?人家锅
ngtwewy 2018-08-23    CSS   

CSS实现单行、多行文本溢出显示省略号

CSS实现单行、多行文本溢出显示省略号(…) 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 实现方法: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图: 但是这个属性只支持
ngtwewy 2018-06-08    CSS   

CSS中比一像素还要细的边框

那么CSS中的1px是什么?浏览器是怎么渲染它的? 网页在一个叫viewport的东西里渲染,可以理解为画布,画布被分成 N x M 个小方格,1个CSS像素,就是其中的一个小方格。 一,viewport又是什么? 网页在viewport上渲染,可以想像在PS上画东西时,上面也有个画布,这个画布分割了 N x M 个方格,N是它的宽度,M是它的高度。宽高都可以任意设置,所以说viewp
ngtwewy 2018-05-13    CSS   

CSS移动端在有弹出层时如何禁止底层的滚动

在一个网页中,如果有一个弹出的层是可以上下滚动的。 但是弹出层滚动到底部时,底层也会跟着滚动。 这其实是手机浏览器一个非常“顽固”的也似乎难以解决默认事件。 我之前也遇到过,最初也是各种阻止默认事件啊,PC有用,但是移动端一点用也没有。 后来是加了 html,body{ height:100%, overflow:hidden } 但是这样做会导致内容返回顶部。
ngtwewy 2018-03-27    CSS   

禁止浏览器下拉刷新

在做一个手机页面的时候,需要下拉滑动,结果浏览器总是自动刷新,百度了一下,禁止浏览器下拉刷新的方法如下:注意: 必须写这样的属性,放在css文件中的,好像没用!
ngtwewy 2018-02-05    CSS   

SVG,字体图标的替代者

GitHub.com 现在不再使用字体来输出图标了。我们把代码库中所有的 Octicon 替换成了 SVG 版本。虽然这些改动并不那么明显,但你马上就能体会到 SVG 图标的优点。Octicon 上的对比切换到 SVG 以后,图标会作为图片渲染而非文字,这使其在任何分辨率下都能很好地在各种像素值下显示。可以比较一下左侧放大后的字体版本和右侧清晰的 SVG 版本。为何使用 SVG?图标字体渲
ngtwewy 2017-10-26    CSS   

动画--过渡函数 transition-timing-function

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,其中要包括以下几种函数:
ngtwewy 2017-10-23    CSS