整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
书使我快乐-哈哈
最近读了张鑫旭的新书《CSS世界》收获了不少奇技淫巧和对CSS的深度理解
也正值个人在公司内部进行部分章节的内容分享，于是顺带着直接把我即将分享的内容先给大家过过目了，就当省去了大家买了书后，无暇顾及观看的尴尬吧！
本书的最后三章分别是
下面我就直接进入主题，开始对每一章节进行一个非系统的分享了
元素的显示与隐藏
使用CSS让元素不可见的方法很多，剪裁、定位到屏幕外、透明度变化等都是可以的。虽然它们都是肉眼看不见，但背后却在多个维度上都有差别
下面是总结的一些比较好的隐藏实践，大家一起来根据实际开发场景来选择合适的使用
比较好的隐藏实践
<script type="text/html"> <!-- 图片是不会发送请求的 --> <img src="1.jpg" /> <!-- 如果想嵌套需要借助textarea了 --> <textarea style="display: none;"> <img src="2.png" /> </textarea> </script> 复制代码
<div id="box">成都</div>
<script>
let oBox = document.getElementById('box');
console.log(oBox); // <div id="box">成都</div>
</script>
.hidden {
position: absolute;
visibility: hidden;
}
<div class="div hidden">一杯敬朝阳 一杯敬月光</div>
.vh {
visibility: hidden;
}
.out {
position: relative;
left: -999em;
}
.clip {
position: absolute;
clip: rect(0, 0, 0, 0);
}
<div class="clip">
<div class="out">青花瓷</div>
</div>
<div style="position: relative;top: -999em;">狮子座</div>
<div style="opacity: 0; filter: alpha(opacity=0);">透明度</div>
<p style="text-indent: -999999px;">天下无双</p>
根据实际的隐藏场景选择合适的隐藏方法，这里就不再多说了，接着往下看吧
display与元素的显隐
我们都知道display如果值为none，则该元素以及所有后代元素都隐藏，反之如果值是非none的情况，则都为显示了
display可以说是web显隐交互中出场频率最高的一种隐藏方式，是真正意义上的隐藏，干净利落，不留痕迹
none做到了无法点击、无法使用屏幕阅读器等辅助设备访问，不占空间，其实不仅仅是这样，更应该知道的是
me: 我有酒，那么别说你没有故事
我知道display:none你才不是一个没有故事的女同学
display: none的元素的background-image图片根据不同浏览器的情况加载情况不一
父元素不带有display:none,而自身有背景图元素带的话，那也照样加载
3.在IE浏览器下，无论怎么搞都会请求图片资源，就是这么任性
因此，在实际开发的时候，例如头图轮播切换效果
那些默认需要隐藏的图片作为背景图藏在display:none元素的子元素上，这样的细小改动就可以明显提升页面的加载体验，也是非常实用的小技巧
whatever
上面说的兴致盎然，但实际中不可能全部都是背景图去加载图片资源的
还有另外一个好朋友，img元素，然并卵的是，上面说了一大堆加载不加载的情况，对img来说没个鸟用，人家不管你none不none的，依旧带着勇闯天涯的气概去请求着资源
活久见
都说display:none做事最纯粹，最干净，不能被点击，触碰到，然而下面这种情况又是什么鬼？
出来解释解释，我们都是文明人是绝对不会动武的！
<form action="/index.php"> <input type="submit" id="hi" style="display: none;"> <label for="hi">提交</label> </form>
隐藏的按钮会触发click,触发表单提交，此现象出现在时髦的浏览器中(IE9+，现代标准浏览器中）
既然有这种例外情况那加了display:none的意义又是什么呢？
很多都是纯天然的
HTML中有很多标签和属性天然自带display:none
<input type="hidden" name="id" value="1" /> // 专门用来放置类似token或id这些隐藏信息的 // 所以说，表单元素的显隐并不影响数据的提交 // 其真正影响的是disabled属性 复制代码
<div hidden>看不见我</div>
// IE11及现代标准浏览器都支持，如果做兼容需要这样写下即可
[hidden] {
display: none;
}
复制代码
既然说到了visibility了，那么就赶紧邀请visibility闪亮登场吧
visibility与元素的显隐
visibility要为自己正名，不仅仅是保留空间这么简单
看点多多：
<ul style="visibility: hidden;"> <li style="visibility: visible;">1</li> <li>2</li> <li>3</li> <li style="visibility: visible;">4</li> </ul> 复制代码
2. 与css计数器visibility:hidden虽然让元素不可见了，但是不影响其计数效果，不会重新计算结果
3. 与transition设置了visibility:hidden的元素，可以很好的展现transition过渡效果
这是因为transition支持的css属性中有visibility(果然是兄弟)，而并没有display属性
visibility:hidden除了对transition友好外，对js来说也很友好
在实际开发中，需要对隐藏元素进行尺寸和位置的获取，来实现布局精确定位的交互
此时，就建议使用visibility:hidden
.hidden {
position: absolute;
visibility: hidden;
}
let ele = document.getElementById('demo');
console.log('clientWidth: ' + ele.clientWidth);
console.log('clientHeight: ' + ele.clientHeight);
console.log('left: ' + ele.clientLeft);
console.log('top ' + ele.clientTop);
console.dir(ele.getBoundingClientRect());
复制代码
好了以上内容要告一段落了，我们继续开始新的征程吧，哈哈
用户界面样式
用户界面样式指的是CSS世界中用来帮助用户进行界面交互的一些CSS样式，主要有outline和cursor等属性
和border形似的outline属性
outline表示元素的轮廓，语法也和border一样，分为宽度、类型和颜色三个值
.outline {
height: 60px;
width: 60px;
outline: 2px dashed #0c9;
}
复制代码
样式表示上相同，但是设计的初衷却是不太相同的，这一点天地日月可鉴
outline是一个和用户体验密切相关的属性，与focus状态以及键盘访问密切相关
对于按钮或链接，通常的键盘操作是：Tab键按次序不断focus控件元素(链接、按钮、输入框等表单元素)，或者focus设置了tabindex的普通元素，然后按Shift+Tab是反向访问
重点来了！
默认状态下，对于处于focus状态的元素，浏览器会通过发光or虚框的形式进行区分和提示，这是友好的用户体验，很有必要，不然用户很难知道自己当前聚焦在了哪个元素上面，会迷失自我
元素如果聚焦到了a链接上，按下回车键就会跳转到相应链接，以上的交互都是基于键盘访问的，这就是为什么outline和键盘访问如此亲密了
不专业的行为
很多时候直接在reset样式的时候，写成如下形式是非常不可取的
* { outline: 0 none; }
或
a { outline: 0 none; }
复制代码
这样直接一竿子打死一群鸭子的做法是不对的，更多的时候是因为浏览器内置的focus效果和设计风格格格不入，才需要重置，而且要使用专门的类名
例如：
.input {
outline: 0;
}
// 但是，必须把focus状态样式加上
.input:focus {
border-color: Highlight
}
复制代码
最后再强调一遍：万万不可在全局设置outline: 0 none;
这样的操作会造成键盘访问的时候用户找不到当前焦点，容易产生困扰的，为了大家好，收敛一下吧
下面来点干货: 在实际开发中，有时候需要让普通元素代替表单控件元素有outline效果
举个栗子：submit按钮来完成UI设计是非常麻烦的，所以使用label元素来移花接木，通过for属性和这些原生的表单控件相关联
[type="submit"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.btn {
display: inline-block;
padding: 2px 12px;
background-color: #19b955;
color: #fff;
font-size: 14px;
cursor: pointer;
}
:focus + label.btn {
outline: 1px dashed hotpink;
outline: 3px auto -webkit-focus-ring-color;
}
<div class="panel">
<input type="submit" id="box">
<label for="box" class="btn">提交</label>
</div>
复制代码
真正的不占据空间的outline及其应用
outline是一个真正意义上不占任何空间的属性，Amazing
头像剪裁的矩形镂空效果
先来看个效果图
上图就是矩形镂空效果，那么下面直接上代码，满满的干货核心css是
.crop {
overflow: hidden;
}
.crop .crop-area {
width: 80px;
height: 80px;
outline: 256px solid #000;
outline: 256px solid rgba(0, 0, 0, .5);
background: url(about:blank);
background: linear-gradient(to top, transparent, transparent);
filter: alpha(opacity=50);
cursor: move;
}
:root .crop-area {
filter: none;
}
复制代码
用一个大大的outline来实现周围半透明的黑色遮罩，因为outline无论设置多么多么大，都不会占据空间影响布局，至于超出的部分，直接给父元素设置一个overflow:hidden就搞定了 注意：
自动填满屏幕剩余空间的应用技巧
开发中很多时候，由于页面内容不够多，导致底部footer会出现尴尬的剩余空间，解决方法往往也有很多种，在此我们还是依然利用outline的功能来完美实现一下
关键的css就是设置一个超大轮廓范围的outline属性，如给个9999px，保证无论屏幕多高，轮廓颜色都能覆盖
值得注意的是，outline无法指定方位，它是直接向四周发散的，所以需要配合clip剪裁来进行处理,以左边和上边为边界进行裁剪
.footer {
height: 50px;
}
.footer > p {
position: absolute;
left: 0;
right: 0;
text-align: center;
padding: 15px 0;
background-color: #00a1f5;
outline: 9999px solid #00a1f5;
color: #fff;
clip: rect(0, 9999px, 9999px, 0);
}
<div class="footer">
<p>没错，我就是footer</p>
</div>
复制代码
光标属性
光标属性cursor我们真的是最熟悉的陌生人啊
为什么这么说呢，因为在众多的属性值面前，我们似乎只用到了pointer(手形)(最常用的，没有之一)，move(移动)，default(系统默认)这几样
在cursor的世界里，远比我们想象的要丰富很多，下面按照功能特性来对其进行分类吧
琳琅满目的cursor属性值
友情不友情的小提示：☆（表示常用）
// 自定义光标
.cur-none {
cursor: url(transparent.cur), auto;
}
:root .cur-none { // IE9+
cursor: none
}
复制代码
body {
cursor: progress;
},
// 当js加载完成后再将光标cursor设为auto;
// 增加了用户体验
document.addEventListener('DOMContentLoaded', () => {
document.body.style.cursor = 'auto';
});
复制代码
p {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
}
<p>弱水三千</p>
// 不过现在最新版的浏览器都自动设置了cursor:default
复制代码
以上内容就介绍完了用户界面样式的全部内容了，还有最后一章的冷知识，大家不要方，继续看下去，了解一下，了解一下，了解一下
流向的改变
说出来你可能不信，direction可以改变水平流向，尽管知道或者使用过的人少之又少，但并不妨碍它的发光发热
而且属性简单好记，值少，兼容极好ie6支持，可以来挖掘一下它的神奇功效
direction
仅仅两个值：
当然看到这里你可能会感觉，这些说起来都没什么鸟用，因为大招是不轻易放出的，而真正有用的地方在于改变网页布局的时候
direction属性默认有一个特性
可以改变替换元素(img,input,textarea,select)或inline-block/inline-table元素的水平呈现顺序
举个栗子：颠倒顺序
<div class="box" dir="rtl"> <p>我是第2名</p> <p>我是第一名</p> </div> <p dir="rtl"> <img src="../1.jpg" alt="猫"> <img src="../2.png" alt="狗"> </p> 复制代码
再举个栗子：比如制作弹窗组件的时候，确认和取消按钮有的时候会根据用户的使用行为会显示在不同的位置
下面来看看这种特性的表现在实际开发中的作用
windows用户看到的样子：
mac用户看到的样子：
好了，direction的话题就告一段落，接下来介绍最后一个知识了，坚持住，快休息了writing-mode
改变CSS世界纵横规则的writing-mode，如此强大的功能，居然没有被大家发掘和广发应用起来，实属遗憾了，话不多说，往下看
writing-mode作用及真正需要关注的属性值
writing-mode可以改变排版，变成垂直流，如下图所示
在使用语法上，也是需要记两套的，一套是IE私有属性，一套是CSS3规范属性CSS3语法：
writing-mode: horizontal-tb; 默认值 文本流是水平方向的 writing-mode: vertical-rl; 文本是垂直方向的，阅读顺序从右向左(古诗的顺序) writing-mode: vertical-lr; 文本垂直方向，阅读顺序从左到右(水平变成了垂直展示) 复制代码
IE语法：
IE的writing-mode多达11个，真正有用的记住两个就好了 -ms-writing-mode: lr-tb; 初始值 lr-tb对应的是CSS3语法中的horizontal-tb -ms-writing-mode: tb-rl; tb-rl对应的是CSS3语法中的vertical-rl -ms-writing-mode: tb-lr; tb-lr对应的是CSS3语法中的vertical-lr 复制代码
针对实战版来整理一份writing-mode是这样的
writing-mode: lr-tb | tb-rl | tb-lr (IE8+) writing-mode: horizontal-tb | vertical-rl | vertical-lr; 复制代码
对于垂直排版来说，实际开发是很少会遇到的，不过还是要说说writing-mode带来的改变
水平方向也能margin合并
我们都知道两个相邻的元素垂直的margin会合并，当元素变为垂直流的时候，水平的margin也会合并
.vertical-mode {
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
<div class="div vertical-mode">
<div class="list" style="margin-left: 20px;">one</div>
<div class="list" style="margin-right: 50px;">two</div>
</div>
复制代码
普通块元素可以使用margin: auto实现垂直居中
img {
display: block;
margin: auto 0;
}
<div class="box vertical-mode">
<img src="../1.jpg" alt="">
</div>
<div class="box vertical-mode" style="text-align: -center;background: gray;">
<div class="demo">青花瓷</div>
<!-- <img src="../2.png" alt=""> -->
</div>
复制代码
上面分别是图片元素和普通块元素实现的垂直居中代码，眼见为实，看图
text-align:center实现图片垂直居中(同上实现的效果)
<div class="box vertical-mode" style="text-align: center;"> <img src="../2.png" alt=""> </div> 复制代码
使用text-indent实现文字下沉效果
核心css
.btn:active {
text-indent: 2px;
}
<a href="javascript：;" class="btn vertical-mode">领</a>
复制代码
这种文字下沉效果只能适合中文，因为在垂直流排版的时候中文是不会旋转的
而且这种效果只适合一个字的情景
实现全兼容的icon fonts图标旋转效果
老IE下让小图标旋转很麻烦，writing-mode把文档变成垂直流的时候，英文、数字和字符号都天然的转了90°
@font-face的兼容性很好IE5.5就支持了，所以就算是IE6和IE7也没问题
<span class="icon-play vertical-mode">剪头朝下</span> 复制代码
好了，这就是《CSS世界》里最后三章的全部内容了，终于写完了，哈哈，希望大家有收获一些冷知识，另外看书还是要买正版的，地址我就不发了，大家还请支持张鑫旭老师的作品简单说两句
做个个人的小总结吧：
css有很多奇妙的地方，在某些特性当初被设计出来的时候可能只是为了某些图文排版而生
但是我们可以利用它们带来的特性发挥自己的创造力，实现其他很多意想不到的效果，因此，上面所讲述的所有知识点，尽管很多内容都有点奇技淫巧以悦妇孺的过程
但这也给我们开发的过程中，提供了一些很出奇的妙招，值得我们好好学习领悟
感谢个位的观看了，再见了，哈哈
随最新的网页设计趋势，紧跟设计潮流是设计师们必做的功课之一。快速更迭的网页设计趋势和网页开发技术对2019年的网页设计趋势来说必将产生直接的影响。
回顾2018年的网页设计趋势，不难看出许多设计趋势都是周期性和持续性的，例如盛行不衰的极简主义和响应式设计。那么，2019年它们的流行度也将丝毫不减，并且随着移动端网络的兴盛，会更加注重移动端网页设计的界面美观度和用户体验。那么，具体2019年网页设计趋势有哪些呢？
前情提要：
1. 移动优先
2. 网页打开速度
3. 个性化插画设计
4. 动态网页背景（CSS3动效、全屏视频背景）
5. 极简主义
6. 响应式设计
7. 渐变设计
8. 排版设计
9. 设计工具
2019年网页设计趋势之一：移动优先
此前，谷歌推出了移动优先索引，Mobile-First Indexing，主要是优先从移动页面获取内容和链接，以此建立索引。因此，2019年，更多网页设计师会优先考虑网页的移动版本设计。而SEO并不是仅仅是其中一个推动网页移动优先设计的因素。据统计，目前全球50%的网站流量都来自于移动端。随着移动端用户群体的增加，良好的视觉效果和搜索体验也是2019年移动优先设计中需要考虑的因素。
图片来源：Kizen Homeby David Kovalev
2019年网页设计趋势之二：网页打开速度
短短三秒钟就能决定用户的去与留。Akamaii和Gomez.com的研究表明，50%的用户希望当他们在点击某个网站时，加载时间不超过三秒钟，甚至更短。而加载时间过长，则会导致他们放弃这个网站。同样，由于2018年7月谷歌宣布的速度更新（ Speed Update）算法，设计师们在未来的设计中需要缩短网页加载时间。
图片来源：ASAPby Hurca™
2019年网页设计趋势之三：个性化插画设计
2017年下半年，Slack，Dropbox等公司开始使用个性化的插画图案来传达品牌特色，使插画设计逐渐开始流行。自然，2018年是插画设计非常流行的一年。但到2019年， 插画设计预计将会达到一个新的高度。
作为一种重要的现代网页设计的视觉传达形式，个性化的插画内容往往比抽象的文字更有趣，更具有视觉冲击力，更能彰显品牌特色，传递给用户更深刻的品牌概念。独特的设计风格和大胆的色调，对于用户而言也更能加深品牌印象。根据数据统计，插画对用户的视觉效果比普通摄影照片好7倍以上。除了网站首页，新用户引导、等待界面、进度页面等情景中也可以运用插画增加趣味性。
图片来源：CrowdRise –Signupby EddieLobanovskiy
图片来源：Rainbow Ridge / Music festivalby Mike | Creative Mints
2019年网页设计趋势之四：动态网页背景
1. CSS3动效
动效这两年崛起非常之迅猛，几乎是网页设计领域最强大的设计趋势之一。无论是在设计师群体还是在用户当中，它的受欢迎程度都非常之高。CSS3技术的运用使得传统的网页设计变得更加生动和易用。而由于动效在UI领域中算作新成员，所以CSS3动效设计在网页设计中的应用还有更多的发展空间。那么，在2019年，CSS3动效在网页设计中将会得到更多的运用和发展。
相关阅读：8个最佳动效网页设计，告别枯燥体验！
图片来源：Submit buttonby ClaudioScotto
2. 动态全屏视频背景
运动的物体往往能更加吸引人的注意。那么想要吸引客户注意的好方法之一就是创建一个带有视频背景的网站。相比文字或图片，短小精致的视频更能够吸引用户注意，为用户提供更方便且丰富的信息，快速了解网页或产品的特点。
对于SEO而言，视频有助于增加用户在网页的停留时间，利于搜索引擎优化和提升转换率。这一点，可以从Facebook对于视频帖子的优先度可以得到验证。并且，在多元化信息时代，视频背景等动态元素在现代网页设计中的应用趋势会逐渐增加。
图片来源：Mockplus iDoc, 更快更简单的产品设计协同软件
2019年网页设计趋势之五：极简主义，简约不简单
作为最经典和永恒的网页设计趋势之一，极简主义往往是“简约”设计的首选。“少即是多”。这就是极简主义的精髓。而将这个概念应用到网页设计上，那么就是使用较少的界面设计元素实现影响巨大的简约设计。简约，而不简单。
快速、动态的生活节奏使得现代人已经没有足够的时间去关注更多冗余的信息。那么体现在网页设计上就是，越少的网页元素，用户思考的时间越少。无论是通过留白设计、对比度、还是清晰的排版设计，如果设计得当，一个简约的网页设计既可以使网页易于浏览，为用户提供准确的信息，也可以提供良好的用户体验。配合CTA，也更容易获得较高的网页转化。
相关阅读：极简网页设计技巧，打造简约之美
图片来源：Hosting & Domains - Web Designby Angel Villanueva
图片来源:Minimalistic Product Pageby Vita Spenser
2019年网页设计趋势之六：响应式设计
近几年响应式设计的流行使设计师们意识到这个响应式设计对于现代网页设计的重要性。各种移动设备、平板电脑、电视、可穿戴设备或者台式机等阅读设备（通称）的快速发展也更加肯定了响应式设计应该并且必须成为主流网页设计趋势之一。
自从2010年谷歌实现移动端响应式网站开始，移动端已经成为响应式网页设计的首选。而现在移动用户数量已远远超过桌面端用户，谷歌也宣布改变算法，以便优先考虑移动优先索引。目的在于鼓励企业更新响应式网页设计，增强移动用户的在线体验。
相关阅读：12个最佳的响应式网页设计教程，轻松带你入门！
图片来源：Furniture Store Responsive Design Flowby Shakuro
图片来源：Responsive Resize Kitby UI8
2019年网页设计趋势之七：鲜艳华丽的渐变设计
在过去的几年里，越来越多的设计师在设计作品时采用了色彩渐变的方法，今年的流体渐变更是风靡全球。即使你只选择了一种颜色，也可以在色彩渐变和不同图片的帮助下，营造出丰富的层次结构感，绘制出一幅令人赏心悦目的画面。鲜艳大胆的渐变色与插画的结合，将是2019年的主流色彩搭配之一。
相关阅读：2018年为什么渐变色重回主流设计趋势？
图片来源：Apple
图片来源：Saving Animals Illustrationby Zahidul
2019年网页设计趋势之八：创意大胆的排版设计
网页排版布局与界面上展示的内容同样重要。有数据显示，网页中超过95%的信息都是以文字形式呈现。就对用户产生的影响力而言，排版仅次于网页配色和图像。具冒险精神的大胆排版能使观众印象深刻，精心挑选的字体也可以传递所需的情绪，并建构强大的视觉层次结构。越来越多的大牌开始采用自己的专属字体以提高品牌的辨识度及独特性。
相关阅读：文字如何实现完美UI？文本排版设计告诉你！
图片来源：Rei.com - Landing Pageby Eddie Lobanovskiy
图片来源：Melt Candle Co.by NathanRiley
小结：
网页设计趋势是全球设计师们共同关心的话题。随着以上9大网页设计趋势在2019年更加现代的网页设计中的运用，设计师们将发挥各自所长展现更加大胆和独特的设计，让人过目不忘。创意网页设计并非不能预测，都是有迹可循的。紧密关注新的网页设计趋势，助你打造完美网站。
信很多自学的小伙伴都想学习web前端，可以关注小编后私信【学习】可以免费领取学习地址/案例教程/2018最新的一套学习教程，让学习有方向。
1、三角形列表项目符号
ul {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
li:before {
content: "";
border-color: transparent #111;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
2、外部CSS3 盒阴影
#mydiv {
-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
-moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}
3、内部CSS3 盒阴影
#mydiv {
-moz-box-shadow: inset 2px 0 4px #000;
-webkit-box-shadow: inset 2px 0 4px #000;
box-shadow: inset 2px 0 4px #000;
}
4、CSS3 斑马线
tbody tr:nth-child(odd) {
background-color: #ccc;
}
5、强制出现垂直滚动条
html { height: 101% }
6、内容垂直居中
.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}
7、CSS3：全屏背景
html {
background: url('images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
8、锚链接伪类
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }
9、为logo隐藏H1
h1 {
text-indent: -9999px;
margin: 0 auto;
width: 320px;
height: 85px;
background: transparent url("images/logo.png") no-repeat scroll;
}
10、自定义文本选择
::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }
11、跨浏览器的透明
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
12、新版清除浮动（2011）
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }
13、典型的CSS清除浮动
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
14、制造模糊文本
想要让文本模糊？可以使用color透明和text-shadow实现
.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
15、CSS：表格列宽自适用
对于表格，当谈到调整列宽时，是比较痛苦的。然后，这里有一个可以使用的技巧：给td元素添加white-space: nowrap;能让文本正确的换行
td {
white-space: nowrap;
}
*请认真填写需求信息，我们会在24小时内与您取得联系。
