本篇教程探讨了一些CSS3的效果，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

边框外发光效果

{ -webkit-box-shadow: 0px 10px 20px 1px #b9b4b4;

   box-shadow: 0px 10px 20px 1px #b9b4b4;

   z-index: 1;

   position: relative;

}

第一个参数，水平位移，第二个参数，垂直位移，第三个参数，模糊范围，第四个参数，阴影范围
加层级是为了能让元素不被周围元素覆盖阴影

border的虚线

width: 100%;
height: 1px;
background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
background-size: 8px 1px;
background-repeat: repeat-x;
比原来的间距宽一些

 阴影滑动覆盖元素效果

.country a:before{

   content:'';

    position: absolute;

    width: 0px;

    height: 100%;

    left: 0px;

    display: block;

    transition:all .6s ease;

    -moz-transition: all .6s ease;

    -o-transition: all .6s ease;

    -webkit-transition: all .6s ease;

}.country a:hover:before{

  content:'';

   background: #000;

   opacity: 0.45;

   width: 232px;

   filter: alpha(opacity=40);

}

有一种从左到右的滑动效果，这里利用伪类实现，初始宽度为0。如果初始宽度不为0 ，利用transform:translateX()这种属性则会影响旁边的元素，,

多行文本溢出

-webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

    height: 2.8rem;

    display: -webkit-box;

设置高度和overflow:hidden是为了兼容

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！