写在前面 最近比较忙，换了新工作还要学习很多全新的技术栈，并给自己找了很多借口来不去坚持写博客。常常具有讽刺意味的是，更多剩下的时间并没有利用而更多的是白白浪费，也许这就是青春吧，挥霍吧，这不是我想要的，既然这样，我还要继续写下去，坚持把博客做好，争取进前100博客，在此谨记。 2015年5...
颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数值[经实验,可以为小数]; 饱和度与亮度:均为百分比; 下图截自http://www.w3.org/wiki/CSS/Properties/color/HSL 当亮度为100%时为白色,当亮度为0%为黑色; 饱和度100%以及亮度50%时生成的颜色均为web安全色 rgb(): rgb函数:r(red),g(green),b(blue)[计算机三原色]; 值...
CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/} [attribute^=value]: 选择该属性以特定值开头的元素 [attribute$=value]: 选择该属性以特定值结尾的元素 [attribute*=value]: 选择该属性中出现了特定值的元素 上边三个是可以组合使用的,方法如 ↓...
CSS3的媒体查询是对CSS2媒体类型的扩展,完善; CSS2的媒体类型仅仅定义了一些设备的关键字,CSS3的媒体查询进一步扩展了如width,height,color等具有取值范围的属性; media query 与 media type 的区别在于: media query是一个值或一个范围的值,而media type仅仅是设备的匹配(所以media type 是一个单词,而media query 后边需要跟着一个数值,两者可以混合使用); media可用于link标签属性 [media] 以及css文件内,下...
概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫的动画; 旋转(rotate): rotate支持一个参数,一个角度值 0-360deg #demo { transform:rotate(180deg) ;/*实现旋转,左上角的东西会在右下角显示*/} 缩放(scale): scale支持两个参数(x,y),如果没有填y的话,则取x的值;1为正常,<1为缩...
CSS 过渡（transition）, 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 transition 后，将按一个曲线速率变化。这个过程可以自定义。 Transition是一个简写属性,四个值(单独使用均加transition-前缀)的顺序: property duration timing-function delay 过渡就是在一...
动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法: @keyframes name { 0% { top: 0; }/*0%可用from关键字替代*/ 50% { top: 10px; } 100% { top: 0; }/*100%可用to关键字替代*/} 由于是CSS3,所以不出意外的各种前缀: --图片来自MDN,CSS中的关键帧 单个帧中可填写多个属性,而且不需要保证一致,如: @-webkit-keyframes identifier { from { to...
继承（Inheritance）是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用那些值时，用户代理（浏览器）不仅要考虑继承，还要考虑声明的特殊性（specificity），另外需要考虑声明本身的来源。这个过程就称为层叠（cascade）。在此我们将讨论css这三种机制的原理和关联。 一、特殊性 考虑以下2对规则，假设每一对规则都匹配同样的元素： h1 {color: red; }body h1 { color:green;} ...
1.border-radius:50%; 2.text-shadow: h-shadow v-shadow blur color; h-shadow:水平位置投影； v-shadow:垂直位置投影； blur:模糊的距离; color:阴影颜色； text-shadow:2px 2px 8px #ff0000; 3.column-count: number|auto; .newspaper{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3; -moz-column-gap:30px; /* Firefox */-webkit-...
一个简单的SVG绘制图片的小案例。 效果图: 代码如下: 1 2 * { 3 padding: 0; 4 margin: 0; 5 } 6 7 body { 8 background-color: #d5d3d4; 9 }10 11 .container {12 width: 500px;13 height: 500px;14 position: relative;15 top: 80px;16 left: 50%;17 ...
子选择器 在CSS样式表中, 有时候我们需要为一个选择器进行再次的选择, 比如要为某段落标签下的标签进行样式设定(标签必须为段落标签下的第一代子元素, 意思即中间不包含别的标签嵌套), 这个时候就要使用子选择器. 代码示例: p>span{ font-size:20px; } " > "就称之为子选择器, 它的作用就是将标签选择器下的第一代子元素的标签中的文本样式设置为字号20px, 但是这种显然不是很灵活...
1、简介 服务提供者是Lumen应用启动的中心，你自己的应用以及所有Lumen的核心服务都是通过服务提供者启动。 但是，我们所谓的”启动“指的是什么？通常，这意味着注册对象，包括注册服务容器绑定、事件监听器、中间件甚至路由。服务提供者是应用配置的中心。 如果你打开Lumen自带的 bootstrap/app.php文件，将会看到一个 $app->register()调用，这里就是应用所要加载的所有服务提供者类。 2、编写服务提供者 ...
英文原文： Chrome 49 Beta: CSS custom properties, background sync with service workers, and new ES2015 features 作者：Josh Karlin，Syncing Samurai 除非另外注明，下面介绍的更新适用于最新 Chrome Beta 版（Android、Chrome OS、Linux、Mac 和 Windows）。 CSS 自定义属性 现代网站的 CSS 文件中常常含有重复的值，例如，在整个页面中重复使用一个配色方案中的少数几种颜色。更改此数据非常繁琐且容易出...
来自： http://www.cnblogs.com/tom-zhu/p/5226096.html Html5和CSS3相信大家现在都已不陌生了吧，但 CSS3哪些新特性值得我们去称赞呢？ 首先还是让大家来看几张效果图，相信大家看到这些效果图，肯定会说这些效果只用CSS是如何实现的呢？ 1、3D正方形及动画（如果大家用过webpack的话，一定看过webpack的动画logo吧。听老婆大人说现在流行动画的logo，再也不是那些静止不动的喽 ：》。） 2、3D正方形边...
Atitit. Toast alert loading js控件 atiToast v2新特性 1. 连续多个txt追加的原理 var txt = document.createElement("p"); txt.setAttribute("id","msgTxt"); txt.style.margin="16px 0"; txt.style.color="#333"; txt.innerHTML = str; document.getElementById("alertmsgDiv").appendChild(txt); 2. V1 新特性 可以连续多个txt追加 作者:: ★(...