无厘头之——CSS

             从今天开始记录自己遇到的比较常用而出好效果的css。因为是想到过去用过的就写下来了，所以感觉没有什么顺序，但是每个都有序号，所以感觉能接受。不断改善！在此说下，搞前台开发的总是离不开浏览器兼容问题，而我写的只考虑到了Webkit内核浏览器。以webkit内核浏览器为主。（说说各种内核浏览器：Webkit:Safari、Chrome等，Mozilla:Firefox,Flock浏览器，Trident:IE浏览器，Opera:Opera浏览器）。

             1.css画三角，前一阵用到三角，好纠结，没画过三角，结果网上一看，原来如此，比如好多弹出框什么的，都有个三角，其实web上好多都是利用css的伪类before和after来实现的，比如当前有个div，那么你可以用这个div的css的伪类来画个三角,可以这样写:

                       

上图css便可以画一个三角形，但是这个三角形是没有边框的，如果你想让这个三角形和你的div配合的时候感觉有边框效果那该怎么搞呢？简单，利用第二个伪类after,同样和上图的before一样写一个样式，不相同的是这两个三角颜色不同大小不同，说白了就是一个小三角形遮住大三角形，大三角行露出的部分当做小三角形的边框。（注意“content:''”是必须要的），大家可以研究一下border-left,border-top,border-bottom,border-right,这几个组合在一起可以画不规则div。

              2.css解决文字溢出，多余的用三个点“...”，如果你想单行展示效果，用“text-overflow: ellipsis;white-space: nowrap;overflow: hidden;”，如下：

                     

效果图，为了看出效果，特意为div加了边框：

                      

如果你觉的单行展示感觉太少，那你看看你文字数量和你div的高，可以根据你的需求展示多行溢出的效果，用“overflow: hidden;-webkit-line-clamp: 3;display: -webkit-box;-webkit-box-orient: vertical;”，如下：

                     

效果图，如下图：

                     

                     3.在写之前给大家分享一个不错的前台技术分享网站，我在写Gradient之前看了看，讲的很细，真心感谢那些默默分享技术的大牛们：http://www.w3cplus.com/content/css3-gradient。当然，我写的只是为了满足很快上手而已，想详细了解的请自己研究。

                       CSS3 Gradient背景色渐变，Gradient分两种渐变，一种是linear-gradient线性渐变，一种是radial-gradient径向渐变。先看线性渐变：linear-gradient:

                       html代码：<div class="center"></div>

图一样式：

                     

                    图一： 

                    图二：

图二样式：

                     

以上样式都是webkit显示的效果：既是（background:-webkit-linear-gradient或background:-webkit-gradient）;

明天再写radial-gradient。

           3.文本折行，目前好像是文字可以自动适应宽度折行，而纯字母的就不能折行，然后就试用word-wrap:break-word;在谷歌上是可以的，可是在Firefox和IE上好像就不行了，然后我就试了试word-break:break-all，firfox就可以了，但是忘了看看IE可不可以。

           4.关于css3

              (1)transition:简写属性，用于在一个属性中设置四个过渡属性。

                   transition-property：规定应用过渡的 CSS 属性的名称。

              transition-duration:定义过渡效果花费的时间。默认是 0。

              transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。（linear:匀速，ease:慢—快—慢）

              transition-delay：规定过渡效果何时开始。默认是 0。
           关于浏览器兼容：

              -moz-transition:                /* Firefox 4 */
              -webkit-transition:            /* Safari and Chrome */
              -o-transition:                     /* Opera */

           (2) 动画:

           Animation和@keyframes

                 如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式               逐渐改为新样式的动画效果。

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}
 
 
@-webkit-keyframes  myfirst
{
0%   {background:red;left:0px; top:0px;}
25%  {background:yellow;left:200px; top:0px;}
50%  {background:blue;left:200px; top:200px;}
75%  {background:green;left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes  myfirst
{
from {background: red;}
to {background: yellow;}
}

              您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。

              @keyframes:规定动画。

              animation: 所有动画属性的简写属性，除了 animation-play-state 属性。

              animation-name:规定 @keyframes 动画的名称。

              animation-duration: 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

              animation-timing-function: 规定动画的速度曲线。默认是"ease"。(常用：linear，ease)

              animation-delay: 规定动画何时开始。默认是0。

              animation-iteration-count: 规定动画被播放的次数。默认是 1。

              animation-direction: 规定动画是否在下一周期逆向地播放。默认是 "normal"。（normal:动画正常播放,alternate：动画应该轮流反向播放）。

              animation-play-state: 规定动画是否正在运行或暂停。默认是 "running"。（paused:规定动画已暂停，running：规定动画正在播放）。

              animation-fill-mode: 规定对象动画时间之外的状态。

休息会儿，希望每次编辑的东西都能帮助生活苦逼的新程序员们（不要让别人把你的梦想给糟蹋了！）。