CSS常用特效大全

background:-webkit-linear-gradient(top,transparent 1px,#F0F0F0 1px,#cdcdcd 2px,transparent 2px,transparent 69px,#F0F0F0 60px),-webkit-linear-gradient(left,transparent 1px,#F0F0F0 1px,#cdcdcd 2px,transparent 2px,transparent 69px,#F0F0F0 60px); -webkit-background-size:41px 41px; -moz-background-size:41px 41px; background-size:41px 41px; margin:0; -webkit-background-size:20px 20px; -moz-background-size:20px 20px; background-size:20px 20px;

CSS背景透明

opacity: 0.3; /*连同文字也透明*/ background-color: rgba(165, 42, 42, 0.3); /*仅背景透明文字不透明*/

倒影：

-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, #ffffff00), to(#ffffff30));

文字描边：

color:#fff;text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;

文字投影：

color:red;text-shadow:2px 1px 2px #000;

边框发光：

box-shadow:0px 0px 10px 1px #3B8CF8,0 0 1px #3B8CF8,0 0 1px #3B8CF8,0 0 1px #3B8CF8,0 0 1px #3B8CF8,0 0 1px #3B8CF8,0 0 1px #3B8CF8;

背景渐变：

background-image:linear-gradient(90deg,#19f3d5 0%,#19d0f3 100%);

控制文字行数：

显示一行文字，多余的文字省略 .title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } 显示两行文字，多余的文字省略 .title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -moz-box; -moz-line-clamp: 2; -moz-box-orient: vertical; word-wrap: break-word; word-break: break-all; white-space: normal; }

台球样式圆形数字：

<style> .msgnum{width:20px;height:20px;line-height:20px;font-size:10px;font-weight:900;color:#fff;text-align:center; background-color:#000;border-radius:50%;position:absolute;} </style> <div class="msgnum">8</div>