添加阴影 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;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 的伪类
<!DOCTYPE html> <html> <head> <style> p:before { content:"台词："; background-color:yellow; color:red; font-weight:bold; } </style> </head> <body> <p>我是唐老鸭。</p> <p>我住在 Duckburg。</p> <p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p> </body> </html>
图片上渐变颜色
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 中的 <pre> 标签。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 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; /*宽和高做出来的背景横线 9%; height: 2px; } .TitleText span:before{ left: 25%; /*调整背景横线的左右距离 } .TitleText span:after { right: 25%; } <div style=" 100%;text-align: center;"> <div class="TitleText"><span id="splineP" style="font-weight:bold;font-size:16px;">监测图</span></div> </div>
给第几个div加样式
.contact-content:nth-child(2) .Panel_A:nth-child(2n-1)