CSS元素内容与父元素内容背景混合模式的样式属性mix-blend-mode
mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合，类似于photoshop中的混合模式。应用场景有：图像叠加效果（如multiply正片叠底，融合.jpg图片背景颜色）、文字与背景融合（如 difference 实现高对比文字）、动态视觉设计（如 overlay 创建光效）。
样式语法：
mix-blend-mod: <blend-mode...
苹果手机Safari浏览器不支持CSS background-attachment属性的替代解决方法
在Web网页前端开发中使用background-attachment:fixed;样式设置背景图片固定时发现苹果手机浏览器Safari不支持CSS属性background-attachment，这着实有点意外，毕竟background-attachment是个比较老标准的CSS属性。既然不支持，那就只能使用替代方案了，比如可以通过固定定位样式position:fixed;实现。
代码很简单，CSS基础牢固的都能想到或者...
超简单的隐藏overflow:scroll滚动条的css代码
目前为止还没有单个css样式属性来隐藏overflow属性的默认滚动条，需要针对不同浏览器使用不同的专属css样式属性或css伪类来实现。如对于webkit内核的浏览器Chrome、Safari等使用css伪类；Firefox火狐浏览器使用scrollbar-width属性；IE 10+浏览器使用专属属性-ms-overflow-style。
Firefox浏览器
scrollbar-width 允许开发者...
纯CSS实现动态加载矩形边线的动画效果
制作web动画效果，通常会想到使用svg或者canvas甚至flash，其实一些简单的动画效果，使用css3属性transition就可以实现，比如动态显示矩形边框线的效果，实现原因是利用过渡效果时宽高显示的时间差。
示意图
实现代码
HTML代码：
<div class="border">
</div>
CSS代码：
.border...
使用CSS text-shadow实现文字描边效果的代码
通过 text-shadow 属性水平、垂直阴影的偏移值可以实现文字的描边效果，兼容 Chrome 4.0+、IE10+、Firefox 3.5+、Safari 4.0+、Opera 9.6+ 浏览器，加上私有属性前缀，可能兼容的版本还可以提高，不过我没有测试。
网页效果：
WWW.NEIRONG.ORG
CSS：
-o-text-shadow: 1px 0px 0px #f00, 0px 1...
CSS文本居中并且两端对齐的样式属性text-align-last
CSS中 text-align:justify; 实现文本两端对齐，最后一行居左；text-align:center; 实现文本居中显示，两端不对齐。
由于 CSS 一个选择器不能使用相同的两个属性，text-align 属性也不能设置两个属性值，所以不能同时使用 justify 和 center 实现两端对齐居中显示。
要想文本两端对齐且居中显示，需要使用 justify 的附属属性 text-align...
PSD字符字重Light、Regular对应CSS font-weight的属性值参考
css属性font-weight提供的属性值有normal、bold、bolder、lighter、100~900、inherit，而设计师提供的设计稿字符面板通常是这样的：
而且设计师用字体的字重通常不只有一种，如Thin、UltraLight、Light、Regular、Medium、Semibold、bold、Extra Bold、Heavy等，如下图：
那么如果在网页...
css中引入指定字体@font-face兼容各浏览器
网页制作中，如果想使用特定的字体可以通过@font-face引用，即是解决访问用户电脑本地没有安装该字体导致不能按设计样式显示的问题。
注意：
支持@font-face的浏览器有Internet Explorer 9、Firefox Opera、Chrome和Safari，另外IE9只支持.eot类型的字体，Firefox、Chrome、Safari、和Opera支持.ttf、.otf 两种类型字体。...
CSS修改表单输入框placeholder属性文字颜色
placeholer是HTML5新增属性，规定可描述输入字段预期值的简短的提示信息，IE10+、Firefox、Opera、Chrome 和 Safari 浏览器支持该属性。
针对不同浏览器修改placeholder属性样式的代码如下
input::-webkit-input-placeholder{
color:#f00;
opacity:1;
}
input::-moz-placeholder{...
利用css属性padding或margin的百分比值实现元素的高度自适应
外边距属性margin和内边距属性padding取百分比值的时候，无论是left、right或top、bottom，都是以其父元素的宽值(width)作为参照物（即分母top/width），这是W3C的规范，官方原文如下：
Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to...
chrome浏览器jquery点击事件click元素出现黄色边框的解决方法
chrome浏览器下，使用jquery click()点击事件，被点击的元素会出现黄色边框：
解决方法：
给被点击的元素添加:focus的css代码：（如被点击的元素是element，代码如下
element:focus {
outline:none;
}
或
element:focus {
outline:0;
}...
CSS实现元素垂直居中的几种方法
网页前端经常需要把元素垂直居中，下面总结几种方法。
1、不知道元素高度，利用定位和CSS属性transform实现元素垂直居中：
代码一：
parentElement{
position:relative;
}
childElement{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
代码二：...
