css实战

actions-box

  1.     .actions-box:hover {
  2.       filter: drop-shadow(0 0 2em #646cffaa);
  3.     }

角标

image.png

  1. .after::before {
  2.   content: "";
  3.   box-sizing: content-box;
  4.   border: 1px solid;
  5.   position: absolute;
  6.   left: 0;
  7.   border: 19px solid transparent;
  8.   border-top-color: #ffffff;
  9.   transform: translateX(104%) translateY(180%);
  10.   display: block;
  11.   z-index: 2;
  12. }
  13. .after::after {
  14.   box-sizing: content-box;
  15.   content: "";
  16.   border: 1px solid;
  17.   position: absolute;
  18.   left: 0;
  19.   border: 20px solid transparent;
  20.   border-top-color: rgba(181, 216, 255, 0.6);
  21.   transform: translateX(95%) translateY(180%);
  22.   display: block;
  23.   z-index: 1;
  24. }

卡片模糊

  1. 绝对定位
  2. 圆角
  3. backdrop-filter:blur(8px)
  4. 阴影

style深度作用选择器

项目中我们经常使用UI框架去做敏捷开发,但是关于UI设计的个性化,我们需要去覆盖组件样式,有两个方案

  • 全局样式增加样式修改,去除scoped
  • 深度样式选择器 = >>>
  • less/sass中是 /deep/
    1. .fuck >>> .weui-cells {
    2.   // ...
    3. }
    1. /deep/.ivu-select  {
    2.  width: 100%;
    3. }

    垂直水平居中

    行内元素

    方法1

    1. .text-box {
    2.   text-align:center
    3. line-height: 100px;
    4. height:100px;
    5. }

    方法2

    1. .father {
    2. width: 400px;
    3. border: 1px solid burlywood;
    4. height: 300px;
    5.   display: table-cell;    
    6.   vertical-align: middle;
    7. }

所有元素

flex弹性盒子

使用flex弹性盒子布局实现子元素的垂直居中

  1. .father {
  2.     display:flex;
  3.   justify-content: center;
  4.   align-items: center;
  5. }

块级元素

position定位

在脱离文档流后的绝对定位，有两种垂直居中的定位方式
1、利用margin和left

  1.     .icon-play {
  2.       position: absolute;
  3.       top: 50%;
  4.       left: 50%;
  5.       margin-top: -30px; //自身高度的一半
  6.       margin-left: -30px ; //自身宽度的一半
  7.       width: 60px;
  8.       height: 60px;
  9.       line-height: 60px;
  10.       text-align: center;
  11.       background: rgba(0, 0, 0, 1);
  12.       opacity: 0.6;
  13.       border-radius: 50%;
  14.     }

2、利用transform[块级元素]
transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。
当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置，
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。
与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高（负自身已知宽高的一半），而translate可以在不知道宽高的情况下进行居中，tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中。

  1.   .content {
  2.     padding:10px;
  3.     background:green;
  4.     color:#fff;
  5.     position:absolute;
  6.     top:50%;
  7.     left:50%;
  8.     border-radius: 5px;
  9.     -webkit-transform: translate(-50%,-50%);
  10.     -moz-transform: translate(-50%,-50%);
  11.     transform:translate(-50%,-50%);
  12. }

3. 利用relative和transform[块级元素]
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

  1. .father {
  2.   width: 100%;
  3.   height: 300px;
  4.   border: 1px solid burlywood;
  5. }
  6. .son {
  7.   width: 50px;
  8.   height: 50px;
  9.   margin: 0 auto;
  10.   background: #42b983;
  11.   position: relative;
  12.   top: 50%;
  13.   transform: translateY(-50%);
  14.   border-radius: 50%;
  15. }

选中摇动动效

  1. .lark-like-btn-flash {
  2.   -webkit-animation-name: bounce;
  3.   animation-name: bounce;
  4.   -webkit-animation-duration: .4s;
  5.   animation-duration: .4s;
  6.   -webkit-animation-iteration-count: 1;
  7.   animation-iteration-count: 1;
  8. }

超出一行显示省略号

  1. white-space: nowrap;
  2. overflow: hidden;
  3. text-overflow: ellipsis;

获取盒子容器的宽高

  1. dom.offsetWidth/offsetHeight

文本溢出解决方案

单行文字溢出方法

  1. div {  
  2.   white-space: nowrap;/不换行/
  3.   overflow: hidden;/隐藏后面的文字/
  4.   text-overflow: ellipsis;/加省略号/
  5.   width: 200px;
  6. }

多行文本溢出方法

简洁版

  1. div {  
  2. width: 200px;
  3.     overflow : hidden;
  4.     text-overflow: ellipsis;
  5.     display: -webkit-box;
  6.     -webkit-line-clamp: 2;
  7.     -webkit-box-orient: vertical;
  8. }

优化版

  1. p {
  2.   position:relative;
  3.   line-height:1.4em;
  4.   height:4.2em;
  5.   overflow:hidden;
  6. }
  7. p::after {
  8.   content:"...";
  9.   font-weight:bold;
  10.   position:absolute;
  11.   bottom:0;
  12.   right:0;
  13.   padding:0 20px 1px 45px;
  14.   background:url(/newimg88/2014/09/ellipsis_bg.png) repeat-y;
  15. }