吕神的自我修养

css画梯形，css画五角星， css画六角星 ，css画六边形

css画梯形，css画五角星， css画六角星 ，css画六边形

css画梯形

<div class="triangle"></div>
<style>
.triangle {
    border-bottom: 100px solid #F36823;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;

    height: 0px;
    width: 100px;
}
</style>

css画五角星

<div class="triangle"></div>

<style>
.triangle{
    margin: 50px 0;
    position: relative;
    display: block;
    color: #F36823;
    width: 0px;
    height: 0px;
    border-right:  100px solid transparent;
    border-bottom: 70px  solid #F36823;
    border-left:   100px solid transparent;
    -moz-transform:    rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform:     rotate(35deg);
    -o-transform:      rotate(35deg);
}
  
.triangle:before {
    border-bottom: 80px solid #F36823;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -45px;
    left: -65px;
    display: block;
    content: '';
    -webkit-transform: rotate(-35deg);
    -moz-transform:    rotate(-35deg);
    -ms-transform:     rotate(-35deg);
    -o-transform:      rotate(-35deg);
}
  
.triangle:after {
    position: absolute;
    display: block;
    color: #F36823;
    top: 3px;
    left: -105px;
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #F36823;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform:    rotate(-70deg);
    -ms-transform:     rotate(-70deg);
    -o-transform:      rotate(-70deg);
    content: '';
}
</style>

css画六角星

<style>
.triangle{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    position: relative;
}
  
.triangle:after{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
}
</style>

css画六边形

<div class="triangle"></div>

<style>
.triangle{
    width: 100px;
    height: 55px;
    background: #F36823;
    position: relative;
}
  
.triangle:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #F36823;
}
  
.triangle:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #F36823;
}
</style>

Reset CSS

css Reset

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/* ----------------Reset Css--------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, input  {
    margin: 0;
    padding: 0;
    border: none;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    font-family: arial, sans-serif;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

此段包含HTML5的CSS reset来自：http://html5reset.org/

/* 
html5doctor.com Reset Stylesheet
v1.4.1 
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

:focus {
outline: 1;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

Normalize 源码解读

Normalize 源码解读
源码地址：https://github.com/necolas/normalize.css/blob/master/normalize.css
源码版本：v3.0.3
html与body 元素
/**
 * 1. 设置全局的字体为sans-serif, 关于中文字体的设置可参考Amaze UI.
 * 2. 防止 iOS 横屏字号放大，同时保证在PC上 zoom 功能正常.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

第2个问题场景是这样，苹果IOS设备调整后会自动调整文字的大小，按照苹果的意图是为了提升用户体验，比如竖屏状态下是14px，转换为横屏时就变成了20px，把text-size-adjust:100%就不会调整字体大小了。如果把值设置为’text-size-adjust:none’，那么就会导致用户无法放大缩小字体了。

/**
 * 修复浏览器默认边距，统一效果.
 */
body {
  margin: 0;
}

HTML5 元素 display definitions
/**
   * 修复 IE 8/9，Html5新元素不能正确显示的问题，定义为block的元素
   * 修复 IE 10/11，details 和 summary 定义为 block 的元素
   * 修复 IE 11，main定义为 block 的元素.
  */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
这个问题想必大家都已经非常清楚，当低版本浏览器遇到不识别的元素时，会默认把他们当成内联元素(inline)，这里重新定义成为block元素。

/**
 * 1. 修复 IE 8/9, HTML5新元素不能正确显示的问题,定义为inline-block元素
 * 2. 修复Chrome, Firefox, Opera的progress元素没有以baseline垂直对齐.
 */
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}
progress是HTML5的新标签，可以定义进度条，但是它Chrome, Firefox, 和Opera并没有已baseline垂直对齐。

/**
 * 对不支持controls属性的浏览器, audio元素给以隐藏.
 * 移除iOS5设备中多余的高度.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

在IE8之前的浏览器是不支持controls属性, 这里的办法是直接隐藏该元素

/**
* 修复 IE 7/8/9, Firefox 3 和 Safari 4 中hidden属性不起作用的问题.
* 在 IE, Safari, Firefox 22- 中隐藏template元素
*/
[hidden],
template {
  display: none;
}

template标签用于HTML模板, 大家应该都是用过HTML模版开发页面, 这个标签是按照实际需求添加的, 但是模板又不能在界面上显示, 所以这里统一了样式,兼容旧浏览器.
链接 Links

/**
* 去掉 IE 10+ 点击链接时的灰色背景.
*/

a {
    background-color: transparent;
}

/**
 * 去掉点击时的outline焦点框，同时保证使用键盘可以显示焦点框，这个操作针对所有浏览器

 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

a:active,
a:hover {
  outline: 0;
}

 
语义化文本标签 Text-level semantics

/**
 * 修正abbr元素在 Firefox 外其他浏览器没有下划线的问题
 */

abbr[title] {
  border-bottom: 1px dotted;
}

语义abbr标签是表示简称或缩写，自身的title属性是完整版，但是此标签在Firefox下默认有下边框，而其他浏览器中没有，这里统一了样式。

/**
 * Firefox3+，Safari4/5 和 Chrome 中统一设置为粗体
 */

b,
strong {
  font-weight: bold;
}

Firefox 3+, Safari 和 Chrome 给b和strong设置的属性是bolder，而不是bold，这里统一了样式。

/**
 * 修正 Safari5 和 Chrome 中没有样式的问题.
 */

dfn {
  font-style: italic;
}

dfn 标签可标记那些对特殊术语或短语的定义，在Safari 和Chrome 里不是斜体，在这里统一了样式。

/**
 * 修复 Firefox 4+，Safari 5 和 Chrome 中section和article内的h1字体大小
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * 修复 IE 6/9, Safari 5 和 Chrome中样式不呈现的问题.
 */

mark {
  background: #ff0;
  color: #000;
}

mark标签用来突出显示部分文本，设置后会有一个高亮背景，但是此标签是HTML5中的新标签，在低版本浏览器并不识别，所以需要重置样式。

/**
 * 在所有浏览器中统一small的字体大小.
 */

small {
  font-size: 80%;
}

small标签在 HTML 4.01 就已经存在，HTML5 中增强了它的寓意，表示旁注信息，不过此标签在各个浏览器中呈现的字体大小不一样，在这里做了统一

/**
 * 防止所有浏览器中的sub和sup影响行高.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

sup和sub两个标签是用来表示上标和下标，据HTML标准中对small，sub和sup的大小要求都是smaller，但是如上所示normalize.css给small设的是80%，而sub和sup却是75%，所以为了保持一致，且不影响其他元素的行高，把两者的line-height设为0，然后设置它的垂直以baseline开始，设置top和bottom手动设置两者偏移量
内嵌元素 Embedded content

/**
 * 去除 IE6-9 和 Firefox 3 中a内部img元素默认的边框.
 */

img {
  border: 0;
}

在旧版本的浏览器中，图片默认会有一个奇丑无比的蓝色边框，这里进行清除，统一样式。

/**
 * 修复 IE9/10/11 中的overflow的怪异表现.
 */

svg:not(:root) {
  overflow: hidden;
}
群组元素 Grouping content

/**
 * 修复 IE 8/9、Safari中margin失效.
 */

figure {
  margin: 1em 40px;
}

figure 是HTML5的新标签，用做文档插图，但它在 IE 8/9 and Safari 中的默认margin失效，这里做了统一设置。

/**
 * 修正 Firefox 和其他浏览器之间的差异.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

在 Firefox 中，hr元素的默认样式很多，和其它浏览器主要的差异有两点： 1.设置了height为2px;    2.box-sizing为border-box; 此样式对这两个问题进行重置，进行统一

/**
 * 标签设置滚动条，内容溢出时出现.
 */

pre {
  overflow: auto;
}

大部分浏览器的pre在overflow的时候会直接溢出去, 这里加上overflow:auto让它出现滚动条

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

用于修复 Safari 5 和 Chrome 中奇怪的字体设置，统一字体样式
表单 Forms

/**
 * 1. 修正所有浏览器中颜色不继承的问题.
 *    Known issue: affects color of disabled elements.
 * 2. 修正所有浏览器中字体不继承的问题.
 * 3. 修正 Firefox 3+， Safari5 和 Chrome 中外边距不同的问题.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

有一些浏览器会把form表单中的一些元素 textarea, text, button, select 中的字体和字体颜色默认会设置成用户的字体或者是浏览器的字体, 并不会从父元素继承, 所以这里重置了这些元素的默认样式。

/**
 * 统一 IE 8/9/10/11 overflow属性为visible.
 */

button {
  overflow: visible;
}

在 IE 8/9/10/11里的button默认的overflow是hidden，这里统一为visible

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

统一各浏览器text-transform不会继承的问题

/**
 * 1. 避免 Android 4.0.* 中的 WebKit bug ，该bug会破坏原生的audio和video的控制器
 * 2. 更正 iOS 中无法设置可点击的input的问题.
 * 3. 统一其他类型的input的光标样式.
 */

button,
html input[type=”button”], /* 1 */
input[type=”reset”],
input[type=”submit”] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

这里将可点击的按钮，统一设置鼠标样式为pointer，提高了可用性

/**
 * 重置按钮禁用时光标样式.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * 移除 Firefox 4+ 的内边距.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

统一设置行高为normal
Firefox浏览器会默认设置input[type=”button”]的行高为normal !important，这里统一样式

/**
 * It’s recommended that you don’t attempt to style these elements.
 * Firefox’s implementation doesn’t respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type=”checkbox”],
input[type=”radio”] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

修正 IE 8/9 box-sizing 被设置为content-box的问题
移除 IE 8/9 中多余的内边距

/**
 * Fix the cursor style for Chrome’s increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type=”number”]::-webkit-inner-spin-button,
input[type=”number”]::-webkit-outer-spin-button {
  height: auto;
}

修正 Chrome 中 input [type=”number”] 在特定高度和 font-size 时,下面一个箭头光标变成cursor: text 效果

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */

input[type=”search”] {
  -webkit-appearance: textfield; /* 1 */
  box-sizing: content-box; /* 2 */
}

修正 Safari 5 和 Chrome 中appearance被设置为searchfield的问题
修正 Safari 5 和 Chrome 中box-sizing被设置为border-box的问题

searchfield是CSS3的属性，它可以让一个div元素看上去像任何元素，但是浏览器支持性并不好，

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type=”search”]::-webkit-search-cancel-button,
input[type=”search”]::-webkit-search-decoration {
  -webkit-appearance: none;
}

移除原生默认样式，统一search的输入框样式

/**
 * 定义一致的边框、外边距和内边距.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11. 修正 IE 6-9 中颜色不能继承的问题
 * 2. Remove padding so people aren’t caught out if they zero out fieldsets.重置内边距
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 移除 IE8-11 中默认的垂直滚动条.
 */

textarea {
  overflow: auto;
}

/**
 * Don’t inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

统一设置optgroup元素font-weight始终为bold

 
表格 Tables

/**
 * 合并单元格边框，重置内边距 Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

关于CSS清除浮动的多种方法

关于清除浮动，已经不是什么新技术了，这里只是归纳终结一下。

清除浮动 ，扩展开了来说就是解决 子元素都浮动了，脱离了文档流，导致父元素无法被撑开的问题。

今天我们就主要谈谈这个问题的解决方案。

ps 清除浮动 – （撑开父元素）

1.父元素是普通文档流  子元素 都浮动    在 浮动块 下边 加个一个 清除浮动   <br clear=”all” />  <div style=”clear:both”></div>

2.父元素是普通文档流  子元素 都浮动    在不影响页面的前提下 给父元素 添加 overflow:hidden

3.父元素是普通文档流  子元素 都浮动    在不影响页面的前提下 把父元素 变成 浮动块

4.clearfix 

CSS print 样式 css控制打印样式 分页 页面大小

显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距。screen一般使用逻辑单位比如px,而打印机则应该使用物理单位比如cm或in。我们常见的A4纸张大小在不同DPI的显示器上显示的大小是不同的。因此如果要精确的控制打印效果就应该使用print
css，这是跨平台兼容的标准。不推荐使用浏览器插件方式实现打印。

web打印还有一种解决方式是生成pdf格式文件,客户端下载来打印,这也是不错的一种打印方式,因为pdf本身就是一种打印标准,可以做到精确控制。可以使用jsPDF在客户端动态生成pdf,也可以在服务器端使用一些组件生成pdf后传送给客户端。当然首选还是使用print
css来实现打印。

引入print css

使用link标签就像通常在html页面中引入样式表一样,不过附加一个额外的media属性,如下面这样:
html 代码:
<link rel=”stylesheet” href=”print.css” media=”print” />
表明print.css样式表是用于打印的

使用@media规则可以在通用的样式表中,使用@media规则指定样式用于打印,比如这样:
css 代码:

@media print selector {
...
}

或者

css 代码:

@media print {
  selector{
  ...
  }
}

使用@import规则使用@import规则在通用的样式表中导入打印样式表,有两种形式,其本质是一样的。
css文件中:

css 代码:

@import url(print-style.css) print;

html文件中:

html 代码:
@import url(print-style.css) print;</style>

<style type="text/css">
@import url(print-style.css) print;
</style>

使用link标签要比使用@import规则性能更好。

度量单位

显示时一般使用px,em或pt等逻辑单位,但在打印时要使用物理单位,比如cm或in(英寸)。对于常见的DPI(Dot Per Inch)为96的screen,px与cm的换算关系如下：

1 inch = 2.54 cm

1cm = 96/2.54 ≈ 37.80 px

1px = 2.54/96 ≈ 0.0265 cm

100px = 2.65 cm

A4纸的标准尺寸为:

21.0cm * 29.7 cm

在96DPI分辨率下,其对应的像素尺寸大约为:

794px * 1123px

因为不同的DPI下,其对应的像素尺寸是不同的,所以才要使用print css,使用物理单位来描述要打印的页面,这样打印效果就会一致了。

@page规则(at-rule)

@page 规则用于指定打印页面的一些属性,包括纸张尺寸,方向,页边距,分页等特性。其语法如下:

css 代码:

@page :pseudo-class {
  size: A4 landscape;
  margin:2cm;
}

其中伪类可以指定:

• page-break-before用于设置元素前面的分页行为,可取值:
• auto默认值。如果必要则在元素前插入分页符。
• always在元素前插入分页符。
• avoid避免在元素前插入分页符。
• left在元素之前足够的分页符，一直到一张空白的左页为止。
• right在元素之前足够的分页符，一直到一张空白的右页为止。
• inherit规定应该从父元素继承 page-break-before 属性的设置。
• page-break-after设置元素后的分页行为。取值与page-break-before一样。
• page-break-inside设置元素内部的分页行为。取值如下:
• auto默认。如果必要则在元素内部插入分页符。
• avoid避免在元素内部插入分页符。
• inherit规定应该从父元素继承 page-break-inside 属性的设置。

比如:

css 代码:
  h1 {page-break-after: always;}}
orphans设置当元素内部发生分页时必须在页面底部保留的最少行数。

@media print {
  section {page-break-before: always;}
  h1 {page-break-after: always;}
  p {page-break-inside: avoid;}
}

widows设置当元素内部发生分页时必须在页面顶部保留的最少行数。比如:
css 代码:

@media print {
  p {orphans:3; widows:2;}
}

其他

对于页面上有显示而不想打印的内容,可以将其display设置为none来避免打印。
需要打印的内容尽量避免float,有些浏览器不会正确的打印浮动的内容。
可以调用window.print()函数来打印当前页面。
分页打印或换页打印：page- break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。每个打印属性都可以设定4种设定值：auto、always、left和 right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。page-break-before若设定成always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。page- break-before若设定成left，则会插入分页符号，直到指定的组件出现在一个左边的空白页上。page-break-before若设定成 right，则会插入分页符号，直到指定的组件出现在一个右边的空白页上。page-break-after属性会将分页符号加在指定组件后，而非之前。在下列程序中您将可以看到这些属性的设定。

CSS 打印属性（Print）

纯CSS改变webkit内核浏览器的滚动条样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>纯CSS改变webkit内核浏览器的滚动条样式</title>
	<style>
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar/*整体部分*/
{
width: 5px;
height:5px;
}

::-webkit-scrollbar-track/*滑动轨道*/
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0px;
background: rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb/*滑块*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb:hover/*滑块效果*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}
	</style>


</head>
<body>
<div style=" height:2400px; background:#f60"></div>
</body>
</html>

if ie 判断多个ie版本…

IE下判断IE版本的语句…[if lte IE 6]……[endif] 

复制代码代码如下:

<!--[if IE 6]> 
<![endif]--> 
只有IE6版本可见 
<!--[if lte IE 6]> 
<![endif]--> 
IE6及其以下版本可见 
<!--[if gte IE 6]> 
<![endif]--> 
IE6及其以上版本可见 
<!--[if IE 7]> 
<![endif]--> 
只有IE7版本可见 
<!--[if lte IE 7]> 
<![endif]--> 
IE7及其以下版本可见 
<!--[if gte IE 7]> 
<![endif]--> 
IE7及其以上的版本可见 
<!--[if IE 8]> 
<![endif]--> 
只有IE8版本可见 
<!--[if lte IE 8]> 
<![endif]--> 
IE8及其以下的版本可见 
<!--[if gte IE 8]> 
<![endif]--> 
IE8及其以上的版本可见 
<![if !IE]> 
<![endif]> 
除了IE以外的版本 

用法： 
（1） 
可使用如下代码检测当前IE浏览器的版本（注意：在非IE浏览器中是看不到效果的） 

复制代码代码如下:

<!––[if IE]> 
<h1>您正在使用IE浏览器</h1> 
<!––[if IE 5]> 
<h2>版本 5</h2> 
<![endif]––> 
<!––[if IE 5.0]> 
<h2>版本 5.0</h2> 
<![endif]––> 
<!––[if IE 5.5]> 
<h2>版本 5.5</h2> 
<![endif]––> 
<!––[if IE 6]> 
<h2>版本 6</h2> 
<![endif]––> 
<!––[if IE 7]> 
<h2>版本 7</h2> 
<![endif]––> 
<![endif]––> 

那如果当前的浏览器是IE，但版本比IE5还低，该怎么办呢，可以使用<!–[if ls IE 5]>，当然，根据条件注释只能在IE5+的环境之下，所以<!–[if ls IE 5]>根本不会被执行。 
lte：就是Less than or equal to的简写，也就是小于或等于的意思。 
lt ：就是Less than的简写，也就是小于的意思。 
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。 
gt ：就是Greater than的简写，也就是大于的意思。 
! ： 就是不等于的意思，跟javascript里的不等于判断符相同 

（2） 
应该如何应用条件注释 
本文一开始就说明了，因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样，具体就是对CSS的解释不同，我们为了兼容这些，可运用条件注释来各自定义，最终达到兼容的目的。比如： 

复制代码代码如下:

<!–- 默认先调用css.css样式表 –-> 
<link rel="stylesheet" type="text/css" href="css.css" /> 
<!-–[if IE 7]> 
<!–- 如果IE浏览器版是7,调用ie7.css样式表-–> 
<link rel="stylesheet" type="text/css" href="ie7.css" /> 
<![endif]–-> 
<!–-[if lte IE 6]> 
<!–- 如果IE浏览器版本小于等于6,调用ie.css样式表 -–> 
<link rel="stylesheet" type="text/css" href="ie.css" /> 
<![endif]–> 

这其中就区分了IE7和IE6向下的浏览器对CSS的执行，达到兼容的目的。同时，首行默认的css.css还能与其他非IE浏览器实现兼容。 
注意：默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。 
比如如下代码，在IE浏览器下执行显示为红色，而在非IE浏览器下显示为黑色。如果把条件注释判断放在首行，则不能实现。该例题很能说明网页对IE浏览器和非IE浏览器间的兼容性问题解决。 

复制代码代码如下:

<style type="text/css"> 
body{ 
background-color: #000; 
} 
</style> 
<!-–[if IE]> 
<style type="text/css"> 
body{ 
background-color: #F00; 
} 
</style> 
<![endif]–-> 

同时，有人会试图使用<!–-[if !IE]>来定义非IE浏览器下的状况，但注意：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。 
正常就是默认的样式，对IE浏览器需要特殊处理的，才进行条件注释。在HTML文件里，而不能在CSS文件中使用。 
现在的DWcs4里面，已经装备了这些注释：在“窗口–>代码片段–>注释”里。其他的版本没太注意到。 

纯CSS3 旋转动画 页面加载中，请稍候… 效果 适合做页面跳转

纯CSS3 旋转动画  页面加载中，请稍候… 效果 适合做页面跳转

代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="10;url='http://www.lrxin.com/';">
<title>页面加载中,请稍候...</title>
<style type="text/css">
body {
background: #555
}
.loading {
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s
}
@-moz-keyframes fadein {
from {
opacity: 0
}
to {
opacity: 1
}
}
@-webkit-keyframes fadein {
from {
opacity: 0
}
to {
opacity: 1
}
}
@-o-keyframes fadein {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fadein {
from {
opacity: 0
}
to {
opacity: 1
}
}
.spinner-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 300;
height: 100%;
min-width: 100%;
min-height: 100%;
background: rgba(255,255,255,0.93)
}
.spinner-text {
position: absolute;
top: 45%;
left: 50%;
margin-left: -100px;
margin-top: 2px;
color: #000;
letter-spacing: 1px;
font-size: 20px;
font-family: Arial
}
.spinner {
position: absolute;
top: 45%;
left: 50%;
display: block;
margin-left: -160px;
width: 1px;
height: 1px;
border: 20px solid rgba(255,0,0,1);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
border-left-color: transparent;
border-right-color: transparent;
-webkit-animation: spin 1.5s infinite;
-moz-animation: spin 1.5s infinite;
animation: spin 1.5s infinite
}
@-webkit-keyframes spin {
0%,100% {
-webkit-transform: rotate(0deg) scale(1)
}
50% {
-webkit-transform: rotate(720deg) scale(0.6)
}
}
@-moz-keyframes spin {
0%,100% {
-moz-transform: rotate(0deg) scale(1)
}
50% {
-moz-transform: rotate(720deg) scale(0.6)
}
}
@-o-keyframes spin {
0%,100% {
-o-transform: rotate(0deg) scale(1)
}
50% {
-o-transform: rotate(720deg) scale(0.6)
}
}
@keyframes spin {
0%,100% {
transform: rotate(0deg) scale(1)
}
50% {
transform: rotate(720deg) scale(0.6)
}
}
</style>
</head>
<body>
<div class="loading">
  <div class="spinner-wrapper">
    <span class="spinner-text">页面加载中，请稍候...</span>
    <span class="spinner"></span>
  </div>
</div>
</body>
</html>

如何改变网页反白颜色？ ( ::selection详解 )

::selection可以改变整个网页的反白顏色，如果在::selection加上标籤名称，就代表只会生效在该标籤内，如p::selection，代表只套用在<p></p>中。

p::selection {
    background: #FA60F1;
    color: #fff;
}
i::selection {
    background: #01DD1B;
    color: #fff;
}
::selection {
    background: #000;
    color: #fff;
}
p::-moz-selection {
    background: #FA60F1;
    color: #fff;
}
i::-moz-selection {
    background: #01DD1B;
    color: #fff;
}
::-moz-selection {
    background: #000;
    color: #fff;
}

由于Firefox瀏览器对於::selection是不支持的，所以要用Firefox专属语法才能达成效果
 
「::-moz-selection」。

另外，::selection只能针对背景顏色(background)及文字顏色(color)下去做设定，如果在其中加入其他的样式，如font-size:25px;这样，是不会生效的（背景图片也不会生效）。假设我们有这一段样式：

::selection {
    background: #FE2AFC;
    color: #fff;
    font-size: 25px;
}
::-moz-selection {
    background: #FE2AFC;
    color: #fff;
    font-size: 25px;
}

CSS3详解：transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]

CSS3详解：transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]

transform的属性包括：rotate() / skew() / scale() / translate(x,y) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

下面我们来分解各个属性的用法：

1.旋转 rotate()：

水平旋转，属性值格式为Xdeg。(deg是“度”的意思)rotate(Xdeg)。X为正数时，顺时针旋转；为负数时，逆时针旋转

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

改变元素基点transform-origin

————————————————————————————

2.扭曲 transform:skew()：

将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述，想象一下平行四边形吧。属性值为一个时，x、y轴参数相同；为两个时，x、y轴各自倾斜。

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

————————————————————————————

3.缩放 scale()：

缩放，1为原始大小。scale(x)。正数放大，负数缩小。属性值为一个时，x/y轴同时缩放；属性值为两个值时，分别控制x、y轴的缩放。

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

————————————————————————————

4.位移 translate(x,y)：

定位元素，基于XY轴重新定位元素。translate(Xpx,Ypx)。属性值为一个时，x、y轴参数相同；为两个时，x、y轴分别定位

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

5.矩阵matrix

matrix(<number>, <number>, <number>, <number>, <number>, <number>) ： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果有感兴趣的朋友可以去了解更深层次的martix使用方法，这里就不多说了。

————————————————————————————

6.transform综合应用：

transform的常用属性就是这些了，下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例：

.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

示例代码：

阅读详细 »

图片下面出现空白像素的问题解决

图片下面出现空白像素的问题解决

在进行页面的DIV+CSS排版时，浏览器中的图片元素img下出现多余空白的问题绝对是常见的，对于该问题的解决方法也是“见机行事”，根据原因的不同要用不同的解决方法，这里把解决直接把解决img图片布局下边的多余空白的BUG的常用方法归纳，供大家参考。

推荐方法 1 和 2 ，最喜欢的还是方法 1.

1、将图片转换为块级对象可去掉下边空白

即，设置img为：

display:block;

在本例中添加一组CSS代码：

img {display:block;}

2、设置图片的垂直对齐方式

即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以去掉下边空白。CSS代码：

img {vertical-align:top;}

3、设置父对象的文字大小为0px ，此方法不推荐。

即，在父对象css中添加一行：

font-size:0;

可以解决空白问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

4、改变父对象的属性

如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置：

overflow:hidden;

来去掉空白。如本例中可以在父对象css中添加以下代码：

width:88px;height:31px;overflow:hidden;

5、设置图片的浮动属性也可去掉空白

即在本例中增加一行CSS代码：

img {float:left;}

如果要实现图文混排，这种方法是很好的选择。但如果容器里就一个img标签，他浮动后，造成父元素内部空 没有高度。

6、取消图片标签和其父对象的最后一个结束标签之间的空格。

这个方法要强调下，在实际开发中该方法可能会出乱子，因为在写代码的时候为了让代码更体现语义和层次清晰，难免要通过IDE提供代码缩进显示，这必然会让标签和其他标签换行显示，比如说DW的“套用源格式”命令。所以说这个方法可以供我们了解出现BUG的一种情况，具体解决图片下边空白方案的还得各位见招拆招了。 

关于clearfix清除浮动

关于clearfix清除浮动

起源：

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

说明：

*对大多数符合标准的浏览器应用第一个声明块，目的是创建一个隐形的
内容为空的块来为目标元素清除浮动。
*第二条为clearfix应用 inline-table 显示属性，仅仅针对IE/Mac。
*利用 * / 对 IE/Mac 隐藏一些规则：
* height:1% 用来触发 IE6 下的haslayout。
*重新对 IE/Mac 外的IE应用 block 显示属性。
*最后一行用于结束针对 IE/Mac 的hack。
由于此方法针对的浏览器或成为历史（尤其是Mac下的IE5 ），或正在靠近
标准的路上，这个方法就不再那么与时俱进了。

抛掉对 IE/Mac 的支持之后，新的清除浮动方法：

/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

说明：

IE6 和 IE7 都不支持 :after 这个伪类，因此需要后面两条来触发IE6/7的haslayout，以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。

在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成：

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{*zoom:1;}

以我目前的浅薄认知来讲，以上写法应该也可以直接达到同样效果。关于这个地方，在文章的评论里也有些讨论，我希望再听听大家的高见。

我平时都是用 overflow:hidden 来清除浮动的，因为够简单粗暴。但是 overflow 有时候也不太适用：

父级元素使用 overflow:hidden 时，如果其子元素定位到部分或全部在父元素之外，父元素就会对超出其外的子元素部分进行裁剪。

对 css3 来说，也会 overflow:hidden 也会对一些属性产生影响。
例如 box-shadow, 当父元素使用 overflow:hidden 属性时，box-shadow 会被裁剪。

其他可能被影响的元素如 text-shadow 和 transform。可以参考 Andy Ford 的 demo

对于那些不愿意再给标签添加额外的 clearfix 类来清除浮动的人来说，直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。

.group:after,
#content:after,
#sidebar:after,
#some .other .thing:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
zoom:1;
}

这种情况下，html 和 css 文件就像一个跷跷板的两头。html 代码倒是整洁了，css 代码却出现了一定的繁冗。而且一旦专题页面过长，或者在项目中使用，用这个清除组的方式反而会不胜其扰。

归结下来，还是得看个人、项目的权衡选择.虽然我一直用简单粗暴的overflow:hidden，但是现在更倾向于使用 clearfix，感觉这种一体化的东西更靠谱，能避免偶尔对 zoom 的遗忘。

成熟的东西稳定性好，但是会比较复杂、厚重;简单的灵活性好，但是过于零散、随意，没有组织性，还没那么稳定.权衡决定到底要使用那种方法，有时候反而比问题本身还让人头疼.

我个人的想法是没有好与坏的区别，只有合适不合适的区别。但是我们一直都受困于所受的教育，什么问题都有标准答案，非对即错，非好即坏。经常可见对一些工具的讨论，都是奔着争出个谁好谁坏而去的，例如 jQuery mootools YUI.相比起到底是好谁坏，我们还是最好赶紧转变思想，摒弃”一刀切”的思想吧。