body { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg
::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; } :-ms-input-placeholder { /* Internet Exp
效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <sty
一、多列布局 CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例: 代码如下（具体的解释也在代码中）浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号。 紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。（图片来源：http://www.runoob.com） <!DOCTYPE html>
css3常用动画+动画库 一、animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画，包括：晃动，闪动，各种淡出淡出效果，如果你想快速的整合各种CSS3动画特效的话，使用它即可方便的实现。 查看演示： https:
@-moz-document url-prefix() { /* 仅供火狐识别的css */ select.form-control { -moz-appearance: none; appearance: none; background-image: url("./caret-down.svg"); background-repeat: no-repeat; background-positio
原文链接：https://www.mk2048.com/blog/blog.php?id=0j2ha1jaa&title=css3+%E5%9B%BE%E7%89%87+%E6%8A%96%E5%8A%A8%E6%95%88%E6%9E%9C @-moz-keyframes tada{ 0%{-moz-transform:scale(1);} 10%,20%{-moz-transform:scale(0.9) rotate(-3
CSS3规范如果想要达到W3C的推荐标准状态还需要不断改进。浏览器则通常在W3C开发标准的过程中就会体现这些特性。这样，标准在最终敲定之前就能知道哪些地方还能进一步改进。 在包含某个特性的的初始阶段，浏览器通常会使用厂商前缀实现这类特征，这样每个浏
原文链接：http://www.cnblogs.com/EkingWee/p/3314973.html 新入博客园，发点以前写的东西占个位先 效果： html: <div class="a1"> <div class="b1"></div> <div class="c1"> <div class="c
二、兼容性方面 显示 /*父元素-横向排列（主轴）*/ display:box; （伸缩盒最老版本） display:-webkit-box; /* iOS 6-, Safari 3.1-6 */ display:-webkit-flex; /* Chrome */ display:-moz-box; /* Firefox 19 */ display:-ms-flexbox; disp
原文链接：http://www.cnblogs.com/ricksun/articles/1575512.html 用Javascript实现：在本文容器中加入onselectstart事件，返回的值为false。例： <body onselectstart="return false;"><table onselectstart="return false;"></tab
你们中有许多人可能已经听到过有关CSS3的不少传言，但是我们现在能真正用到的CSS3技巧又有哪些呢？本文，我将向你展示一些与众不同的CSS3技巧，这些技巧在一些主要的浏览器中表现良好（如Firefox，Chrome，Safari，Opera浏览器）。这些效果会在不支持的浏览器中降级渲染（如IE浏览器）。使用浏览器特定的
@浏览器私有前缀 浏览器私有前缀 一般来说，浏览器私有前缀包括 Firefox 的 -moz- 、IE 的 -ms- 、 Safari 和 Chrome 的 -webkit- ，以及 Opera 的 -o-。
css3动画对于不同的浏览器是有兼容问题的 当在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果 //各种浏览器绑定方法 @keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {bac
input::-webkit-input-placeholder{ color:#4e4e4e; } input::-moz-placeholder{ color:#4e4e4e; } input:-moz-placeholder{ color:#4e4e4e; } input:-ms-input-placeholder{ color:#4e4e4e; }
感谢我的前端大神指导 插件下载地址 链接：https://pan.baidu.com/s/1wwGLrlJld4Oa2gXvHIQJ4Q 提取码：tbub 样式展示 由于css中的内容冲突引入导致很多问题在前端的指导下将css全部提出，引入loading.js即可直接使用 <%--loading插件的css--%> <style> .cpt-loading-
1、-moz代表firefox浏览器私有属性 2、-ms代表ie浏览器私有属性 3、-webkit代表safari、chrome私有属性 这些是为了兼容老版本的写法，比较新版本的浏览器都支持直接写：border-radius。 现在比较流行的一个概念就是：不太关键的样式，可以不考虑兼容，比如你说的圆角，并不影响内
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css" media="screen"> /*基本样式*/ * {
移动端web1、响应式背影的问题：-webkit-tap-highlight-color:transparent; 2、手机web的缩放问题：<meta http-equiv="content-type" content="text/html;charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maxi
@mixin df { display: -webkit-flex; display: -moz-flex; display: flex;}@mixin df-ai { -webkit-align-items: center; -moz-align-items: center; align-items: center;}@mixin df-ai-fs { -webkit-align-items: flex-start; -moz-align-items: f
HTML: <a class="button"></a> <span class="button"></span> CSS: .button { display: inline-block; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Sticky notes using CSS3 and Google Fonts (Step 5)</title><link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel=&q
相信大家在生活中已经对加载界面已经非常熟悉，一个优美的加载界面绝对让你好感度大增，不说废话了让我们来看看代码吧！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet&qu
