Text Shadow

通配选择符( * ) 通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用 相邻选择器（+） 会选择相邻的下一个的元素（不包括自己） 兄弟选择器（~） 会选择相邻的后面的所有兄弟元素（不包括自己） 属性选择器 E[att] { sRules } 选择具有att属性的E元素。 E[att="val"] { sRules } 选择具有att属性且属性值等于val的E元素 E[att~="val"] { sRules } 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。 E[att^="val"] { sRules } 选择具有att属性且属性值为以val开头的字符串的E元素 ;(包括)，如果有多个值，则写在开头的一个包括val则可以； E [att$="val"] { sRules } 选择具有att属性且属性值为以val结尾的字符串的E元素。 (包括该字符串)，如果有多个属性值，则不可以！ E[att*="val"] { sRules } 选择具有att属性且属性值 有 val 字母 的字符串的E元素。 如果属性有多个属性值，但属性值中包含有val的字符串，也可以。 E[att|="val"] { sRules } 选择具有 att 属性，其值是以 val 开头并用连接符"-

前言 本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。 之前发的 CSS技巧 大部分都是依照本文的套路来写的 有人问我为什么我能想出这么多的动画？笔者阅番百部，对常用的动画技巧了如指掌，同样那些酷炫的网站只要细心观察，也会给笔者带来很多设计上的灵感。 一言以蔽之：只有多欣赏动画，才能写出好的动画。 小提示：本文会不定期更新哦！每打开一次可能会有新的惊喜 交错动画 有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。 那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（ delay ）这一属性。举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就是将延迟设为0.5秒），其他元素以此类推，这样它们就会错开来，形成一种独特的视觉效果。 这就是所谓的交错动画：通过设置不同的延迟时间，达到动画交错播放的效果。 本demo地址： Staggered Wave Loading 用JS分割文本 还有一种经常用到的玩法：用JS将句子或单词分割成字母，并给每个字母加上不同延时的动画，同样也很华丽 本demo地址： Staggered LandIn Text

1.什么是 CSS 预处理器 CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS 更见简洁，适应性更强，代码更直观等诸多好处。 2.基本语法区别: 在使用 CSS 预处理器之前最重要的是理解语法，幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。 首先 Sass 和 Less 都使用的是标准的 CSS 语法，所以可以很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名。 /* style.scss or style.less */ h1 { color: #0982C1; } 这是一个再普通不过的，不过 Sass 同时也支持老的语法，就是不包含花括号和分号的方式： /* style.sass */ h1 color: #0982c1 而 Stylus 支持的语法要更多样性一点，它默认使用 .styl 的文件扩展名，下面是 Stylus 支持的语法： /* style.styl */ h1 { color: #0982C1; } /* omit brackets */ h1 color: #0982C1; /* omit colons and semi-colons

http://www.jianshu.com/p/a649508b4f70 微信订阅号：Rabbit_svip 用文本阴影和字体透明颜色可以做出毛玻璃的效果。 <div>毛玻璃</div> <style> div { color: rgba(0, 0, 0, 0); text-shadow: 0 0 10px #000; cursor: default; transition: color 0.3s ease, text-shadow 0.3s ease; } div:hover { color: rgba(0, 0, 0, 1); text-shadow: none; } </style> 微信订阅号：Rabbit_svip 来源： oschina 链接： https://my.oschina.net/u/4387439/blog/3206523

一、背景颜色图片平铺 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 默认是平铺 background-position 背景位置 (模式是左上角 0 0) 方位没有顺序 1.（length 长度 ）写精确单位 或者百分比 第一个值是x坐标 第二个一定是y 2.（position： top|center | bottom | left | right 方位坐标） 如果方位名词只写一个 另外一个默认为center 3.混搭也ok background-attachment 设置背景图是否固定 默认是scroll, fixed是固定 合写： background： 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 background: #000 url(image/timg.jpg) no-repeat center -25px fixed; 二、背景缩放 景缩放 background-size 100px; 等比例缩放 尽量只改一个值 否则图片会是真扭曲也可以写百分比 常用的两个参数： cover :会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出自动隐藏 contain:图片等比例缩放，如果图片的宽度或者高度有一个和盒子一样大了就不在缩放，不会有缺失的部分，保证了图片的完整性。

标题党一时爽，一直标题党一直爽 还在上大学那会儿，我就喜欢玩 Photoshop。后来写网页的时候，由于自己太菜，好多花里胡哨的效果都得借助 Photoshop 实现，当时就特别希望 CSS 能像 Photoshop 一样处理图片。 随着对 CSS 的了解越多，我发现 CSS 有很多平时用得少（或者不会用），但非常厉害的属性。这些属性实现了很多 Photoshop 的功能，比如滤镜、混合模式。 我简单整理了一下，由于这些属性的功能十分强大，每一个属性都能单独成文，所以这里只是做一个目录。 一、渐变 Gradient 渐变在 PS 里面是一个很常用的功能，在工作中用到 CSS 渐变的场景也不少 但除了简单的线性渐变、径向渐变之外，还可以用渐变做出这样的效果： 甚至是用渐变做一个进度条： 相关文章： 《使用 CSS 渐变》 《CSS3 Gradient 渐变还能这么玩》 二、倒影 box-reflect 这个属性可以使某个 DOM 元素产生一个倒影，并且可以规定倒影的方向和距离 另外还可以给这个倒影添加一个遮罩，比如一个透明渐变： -webkit-box-reflect: below -7px linear-gradient(to bottom,transparent,rgba( 0 , 0 , 0 , 0.4 )); 相关文章： 《-webkit-box-reflect》 《CSS

注释: /* */ 1、css和html的结合方式 (1)用(每个)html标签上的style属性结合 (2)使用html的<style>标签 (3)在style标签里使用语句 @import url(css文件路径);(某些浏览器不支持) (4)使用头标签link引入外部css文件 2、css的选择器(* 代表所有) (1)标签选择器 使用标签名作为选择器名称： 标签名{css属性} (2)class选择器 每个html标签都有个class属性(可以有多个class属性,用空格隔开) - [标签].class名{css属性}　　 (3)id选择器 每个html标签都有个属性id - [标签]#id名{css属性}　　 (4)属性选择器 选择具有指定属性值的标签 - 选择器[id='abc']{css属性}　　 优先级： style属性 > id选择器 > class选择器 > 标签选择器 3、css的扩展选择器 (1)关联选择器 指定嵌套标签里面的样式(标签1中的标签2) - 标签1 标签2{css属性}　　 (2)组合选择器 把不同标签设置成相同的样式 - 标签1,标签2{css属性}}　　 (3)伪元素选择器 css里面提供了一些定义好的样式,可以定义元素在不同条件下的样式 超链接(顺序不能变) 状态：原始状态(:link)，鼠标放上去(:hover)，点击还没释放(

通过从网上看到的面经，总结的一些高频的前端CSS面试题，有很多不会，于是找资料，并通过代码实现，自己提供了一些参考答案。 ####目录 1.怎样会产生浮动？ 2.如何清除浮动？ 3.盒子模型，以及IE和其他浏览器的却别？ 4.CSS3新特性有哪些？ 5.em 和 rem 的区别？ 6.重排和重绘？ 7.行元素和块元素？ 8.border-box 和 content-box 的区别？ 9.伪元素和伪类？ 10.unset? 11.CSS选择器优先级？ 12.水平垂直居中布局？ 13.两列等高布局？ ####1.怎样会产生浮动？ 某一个元素的float属性设置为left或者right，这个元素就会脱离文档流，左右浮动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。 ###2.如何清除浮动？ 方法比较多，这里介绍三种典型的方法： a.在与浮动元素的同级元素中加一个空的div，并将其css属性设置为 .clear1 { clear: both; } 优点：通俗易懂，容易掌握 缺点：添加了太多空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的

“ 常说 ，要认识一个人①，大概了解一下背景，然后见面时打招呼讲什么语言规矩范礼②，她回应了，声音很好听，你会继续选择③用选择什么语气对待？而且又怎么漂亮，相信自己不会拒绝④的，来预先处理⑤好情绪，好让彼此能有一个新的开始⑥，给生活一个甜美的谜底吧⑦”--晚安，EmilyChen！ （一）CSS简介 CSS（Casadaing Style Sheet）层叠样式表，她的使命是把结构和表现分离，让HTML文件变小，提高加载速度，提升用户体验。 （二）语法及其规范 【1】语法 外联样式表 内部样式表 行内元素表<style="color:red;" 【2】规矩 层叠性（样式冲突即后来居上，“长江后浪推前浪，前浪死在沙滩上”） 继承性（子承父业，“龙生龙凤生凤，老鼠生的小孩会打洞”） 优先级（选择器权重计算的数位之间没有进制，比如“10个a赶上一个类”的说法不存在） 地位 身份 0 继承、* 1 元素、伪元素 10 类、伪类、属性 100 id 1000 style=""行内 无穷 !important 【3】规范 Ⅰ建议遵循以下顺序： 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 自身属性：width / height / margin /

1、什么是CSS，CSS是如何工作的 css(层叠样式表),用来样式化和排版网页。 在引入CSS的前提下，浏览器会加载解析html,同时加载css。生成DOM(文档对象模型)并展示DOM 2、CSS的基本语法是怎样的 1.声明:(属性:值);2.css规则:选择器 {声明块};多个声明用";分隔构成声明块.(ps: p#id01 {xx属性:xx值});3.css语句:@规则和嵌套语句 3、CSS选择器是什么概念，简单选择器和属性选择器是什么 选择器是一种模式，匹配页面元素; 简单选择器: 1.类型选择器(p,div) 2.类选择器(.) 3.ID选择器(#) 4.通用选择器（*） 属性选择器: 1.属性选择器【title】 2.属性和值选择器【title=xxx】 3.属性和值选择器 - 多个值【title~=xxx】 4、文本样式都有哪些相关属性，对应哪些值 字体样式 1.color:red; #FFFFFF;rgb(0,125,246);rgb(100%,100%,100%);#fff;网络安全色; 2.font-family 3.font-size 4.font-sytle 5.font-weight 6.font-transform 7.font-descoration 8.text-shadow ... 文本布局风格 1.text-align 2.line-height