添加阴影  box-shadow

借鉴地址：https://blog.csdn.net/freshlover/article/details/7610269 基本语法是box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor 　　　　　　　　　　　　inset内阴影 　　　　　　　　　　　　X-offset:阴影水平偏移量 　　　　　　　　　　　　Y-offset:阴影垂直偏移量 　　　　　　　　　　　　阴影模糊半径 　　　　　　　　　　　　阴影扩展半径 　　　　　　　　　　　　阴影颜色 基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式　　 //Firefox4.0- -moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;  //Safariand Google chrome10.0-  -webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;  示例： 阴影大小为10px:box-shadow:0 0 10px #0CC; 添加颜色为半透明：box-shadow:0 0 10px rgba(0, 204, 204, .5); 设置内阴影：box-shadow:inset 0 0 10px #0CC; 四边设置阴影，x-offset为负值时，生成左边阴影，为正值时生成右边阴影，y-offset为正值是生成底部阴影，为负值时生成顶部阴影。并且把模糊半径设置为0，如果不设置为0的话那么其他三边也将会有阴影！ box-shadow:-10px 0 10px red, /*左边阴影*/ 　　　　　　10px 0 10px yellow, /*右边阴影*/ 　　　　　　0 -10px 10px blue, /*顶部阴影*/ 　　　　　　0 10px 10px green; /*底边阴影*/ box-shadow: h-shadow v-shadow blur spread color inset; h-shadow必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur	可选。模糊距离。 spread 可选。阴影的尺寸。 color	可选。阴影的颜色。请参阅 CSS 颜色值。 inset	可选。将外部阴影 (outset) 改为内部阴影。 

 弹出层样式 

.sign_inc{display:none; background:rgba(44,44,44,0.5);position:fixed;top:0;width:100%;height:100%;}

英文全大写

text-transform：uppercase;

input 的伪类

::-webkit-datetime-edit { padding: 1em; } 文本框高度 ::-webkit-datetime-edit-fields-wrapper { background: silver; } 背景颜色::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; } 年月日间隔::-webkit-datetime-edit-month-field { color: blue; } 月的颜色::-webkit-datetime-edit-day-field { color: green; } 日的颜色 ::-webkit-datetime-edit-year-field { color: purple; } 年的颜色 ::-webkit-inner-spin-button { display: none; } /* 上下按钮隐藏 ::-webkit-calendar-picker-indicator { background: white; }/* 下拉按钮隐藏

before 的伪类

我是唐老鸭。
我住在 Duckburg。
注释：对于在 IE8 中工作的 :before，必须声明 DOCTYPE。

图片上渐变颜色

background-image: linear-gradient(to bottom,#5bc0de,#2f96b4);

transition-delay 规定过渡效果何时开始。值以秒或毫秒计

transition-delay: time; time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

元素进行旋转、缩放、移动或倾斜 transform 属性向元素应用 2D 或 3D 转换,允许我们对元素进行旋转、缩放、移动或倾斜。

transform:rotate(7deg); -ms-transform:rotate(7deg); [ IE 9 ] -moz-transform:rotate(7deg); [ Firefox ] -webkit-transform:rotate(7deg); [ Safari 和 Chrome ] -o-transform:rotate(7deg); [ Opera] Opera

CSS巧妙实现分隔线的几种方法

http://www.daqianduan.com/4258.html

 

常用的CSS样式

css文本样式 http://www.5ixuexiwang.com/html/biancheng/css/2014/0508/1953.html

/*

序号 中文说明 标记语法

1 字体样式 {font:font-style font-variant font-weight font-size font-family}

2 字体类型 {font-family:"字体1","字体2","字体3",...}

3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字体风格 {font-style:inherit|italic|normal|oblique}

5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}

6 字体颜色 {color:数值;}

7 阴影颜色 {text-shadow:16位色值}

8 字体行高 {line-height:数值|inherit|normal;}

9 字 间 距 {letter-spacing:数值|inherit|normal}

10 单词间距 {word-spacing:数值|inherit|normal}

11 字体变形 {font-variant:inherit|normal|small-cps }

12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 ？ {font-size-adjust:inherit|none}

14 ？ {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

*/

鼠标变小手 cursor

cursor:pointer;

单文本溢出省略... text-overflow语法

overflow: hidden;white-space: nowrap;text-overflow : clip | ellipsis省略号。

多行文本溢出省略语法

display: -webkit-box!important;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2;

自动换行 word-break

word-break: normal | break-all | keep-all; 属性规定自动换行的处理方法。 normal    使用浏览器默认的换行规则。break-all 允许在单词内换行。keep-all 只能在半角空格或连字符处换行。

word-wrap 属性允许长单词或 URL 地址换行到下一行。

word-wrap: normal | break-word; 属性允许长单词或 URL 地址换行到下一行。normal 只在允许的断字点换行（浏览器保持默认处理）。break-word 在长单词或 URL 地址内部进行换行。

white-space段落中的文本不进行换行

normal 默认。空白会被浏览器忽略。pre 空白会被浏览器保留。其行为方式类似 HTML 中的 
 标签。nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。pre-wrap 保留空白符序列，但是正常地进行换行。pre-line 合并空白符序列，但是保留换行符。inherit 规定应该从父元素继承 white-space 属性的值。

添加专栏线

.TitleText span {display: block; /*设置为块级元素会独占一行形成上下居中的效果font-size: 3em;color: #212121;position: relative; /*定位横线（当横线的父元素）}.TitleText span:before, .TitleText span:after {content: ''; /*CSS伪类用法position: absolute; /*定位背景横线的位置top: 52%;background: #494949; /*宽和高做出来的背景横线width: 9%;height: 2px;}.TitleText span:before{left: 25%; /*调整背景横线的左右距离}.TitleText span:after {right: 25%;}
     
      
       监测图
      
     

给第几个div加样式

.contact-content:nth-child(2) .Panel_A:nth-child(2n-1)