后台传回数字123 前端对应显示 红色高位 橙色中危 绿色低危 三个方块】
可封装方法 多次调用
//等级 控制文字
function fnLevel(num){
var str = '';
if(num == '0'){
str = '低危';
}else if(num == '1'){
str = '中危';
}else if(num == '2'){
str = '高危';
}
return str;
}
//等级 控制颜色
function fnColorbyLevel(num){
var str = '';
if(num == '0'){
str = 'label-success';
}else if(num == '1'){
str = 'label-warning';
}else if(num == '2'){
str = 'label-danger';
}
return str;
}
14.超出元素宽度的文字显示.....鼠标放入 提示信息展示全部
<td class="bugName" title="{{ bug.name }}">{{ bug.name }}</td>
.bugName{
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
15. CSS三角形
如何使用CSS生成一个三角形？
先编写一个空元素
<div class="triangle"></div>
然后，将它四个边框中的三个边框设为透明，剩下一个设为可见，就可以生成三角形效果：
.triangle {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
height: 0px;
width: 0px;
}
23. CSS阴影
外阴影：
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
内阴影：
.shadow {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}
24. 取消IE文本框的滚动条
textarea { overflow: auto; }
25. 黑白图像
这段代码会让你的彩色照片显示为黑白照片，是不是很酷？
img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
27. 页面顶部阴影
下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果：
body:before {
content: ""; position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;}
9. 所有一切都垂直居中
要将所有元素垂直居中，太简单了：注意：在IE11中要小心flexbox。
html, body {
height: 100%;
margin: 0;}
body { -webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;}
32. 对图标使用 SVG
我们没有理由不对图标使用SVG，SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。
.logo { background: url("logo.svg");}
42. 文本渐变
文本渐变效果很流行，使用 CSS3 能够很简单就实现：
h2[data-text] {
position: relative;}
h2[data-text]::after {
content: attr(data-text);
z-index: 10;
color: #e3e3e3;
position: absolute;
top: 0;
left: 0;
-webkit-mask-image:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)),
color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}
43. 禁用鼠标事件
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。
.disabled { pointer-events: none; }
44. 模糊文本
简单但很漂亮的文本模糊效果，简单又好看！
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);}
45.简单的方法调整图片大小
.content img {
height:auto;
width:500px;
}
47.CSS首字放大
p:first-letter {
display: block;
float: left;
margin: 5px 5px 0 0;
color: red;
font-size: 1.4em;
background: #ddd;
font-family: Helvetica;
}
48.用CSS翻转图像
#content img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
63.css实现不换行、自动换行、强制换行
//不换行
white-space:nowrap;
//自动换行
word-wrap: break-word;
word-break: normal;
//强制换行
word-break:break-all;
67.cursor属性
cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。
CSS提供的cursor值：
pointer ：小手指；
help：箭头加问号；
wait：转圈圈；
move：移动光标；
crosshair：十字光标。
通过pointer属性我们可以伪造超链接：
<span >pointer</span>