css工作日志记录

<block v-for="(tabItem, index) in list" :key="index">
   <view :class="[currentIndex == index ?'item_on':'', 
                  currentIndex && index == currentIndex - 1?'left- 
                 border':'',' default-item']" 
          @tap="tabClick(index)">
      <view class="flex-rowajCenter">
         <text class="over-elipse">啊啊啊啊啊</text>
      </view>list
   </view>
</block>

// css 部分
     .default-item {
        width: 260rpx;
        display: inline-block;
        text-align: center;
        box-sizing: border-box;
        line-height: 80rpx;
        font-weight: 500;
        color: #666666;
        font-size: 32rpx;
        background: #fff;
        view {
          width: 100%;
          height: 100%;
          background-color: red;
          text{
            max-width: 224rpx;
          }
        }
      }
      .item_on {
        color: #713F04;
        font-weight: 600;
        background-color: red;
        view {
          background-color: #fff;
          border-radius: 16rpx 16rpx 0rpx 0rpx;
        }
      }
      .item_on + .default-item {
        view {
          border-radius: 0 0 0 16rpx;
        }
      }
      .left-border{
        view {
          border-radius: 0 0 16rpx 0;
        }
      }

通过mask使用svg

<view class="bg-opacity"></view>

.bg-opacity {
    mask: url("https://xxxx.svg");
    -webkit-mask: url("https://xxxx.svg");
    -webkit-mask-size: 100%;
    mask-size: 100%;
    width: 294rpx;
    height: 249rpx;
    display: inline-block;
    background: var(--templateColor);
  }

三角形

   

// 高8，宽6的三角形
width: 0;
height: 0;
border-style: solid;
border-width: 80px 0 0 60px;
border-color: transparent transparent transparent #BF7F00;

 

width: 0;
height: 0;
border-style: solid;
border-width: 0 0 80px 20px;
border-color: transparent transparent red transparent;

css渐现

// 图片加载后就渐现显示
// html
<image :class="['bg-img',item.change && 'bg-img-show']" mode="aspectFill" 
:lazy-load="true" :src="imgUrl" />


// js
// 触发事件，如swiper切换，也可以是加载完成image的@load,重点是引起css的样式变化
  durationChange (item) {
    item.change = false
    setTimeout(()=> {
      item.change = true
    }, 0);
  },


// css
.bg-img{
    width: 100%;
    height: 100%;
    opacity: 0.7;
    &-show{
      opacity: 1;
      transition-duration: 1s;
      transition-property: opacity;
    }
}

下圆环

width: 10rpx;
height: 10rpx;
border: 1rpx solid #F5222D;
border-radius: 50%;
background: #fff;
clip-path: polygon(0% 50%, 0 100%, 3600% 100%, 50% 50%);

效果图：tips:加  transform: rotate(180deg);  是上半圆环

控制显示行数

{
    overflow: hidden;
    display: -webkit-box;           // 将元素作为弹性伸缩盒子模型显示 。
    -webkit-line-clamp: 2;          // 用来限制在一个块元素显示的文本的行数
    -webkit-box-orient: vertical;   // 设置或检索伸缩盒对象的子元素的排列方式
}



{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

文本垂直居中对齐

div.parent {
    position: relative; 
}
div.child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}

css禁止点击

{
    pointer-events: none;
    cursor: not-allowed
}

清除浮动

1、
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
2、clear:both
3、overflow:hidden

扇形

.shanzi{
  width: 0;
  height: 0;
  border-width: 50px;
  border-style: solid;
  border-color: red transparent transparent;
  border-radius: 50px;
}

文本两端对齐

.take-detail view {

width: 112rpx;

text-align: justify;

height: 26rpx;

}

.take-detail view::after{

display: inline-block ; content: ''; padding-left: 100%;

}

根据内容自适应宽度。设置最大宽度。

width: fit-content;
width: -webkit-fit-content;
width: -moz-fit-content;
max-width: 5.7rem;

radio框设置

radio单选框设置颜色样式，html代码长这样ᕦ(･ㅂ･)ᕤ

<input type="radio" id="discuss" />
<label class="discuss" for="discuss">提问</label>

css代码

// 清除原有样式，小黑点
input[type="radio"] {
  position: relative;
  top: 0.07rem;
  left: 0.3rem;
  opacity: 0;
}
// 设置点击前的样式
input[type="radio"] + label::before {
  content: "\a0"; /*不换行空格*/
  display: inline-block;
  vertical-align: middle;
  font-size: 0.3rem;
  width: 0.26rem;
  height: 0.26rem;
  margin-right: 0.16rem;
  border-radius: 50%;
  border: 1px solid #fe4f4f;
}
// 选中的样式
input[type="radio"]:checked + label::before {
  background-color: #fe4f4f;
  background-clip: content-box;
  padding: 0.07rem;
  width: 0.12rem;
  height: 0.12rem;
}

设置滚动条

body,

html {

  scroll-behavior: smooth;

}

css文字特效，闪白打光

.logo:before {
    content: "";
    position: absolute;
    width: 150px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: blink 1s ease-in 1s infinite;
    animation: blink 20s ease-in 1s infinite;
}

效果如图：http://www.codezd.com/experience/251.html

文本保持原有格式，比如：换行。

white-space: pre-wrap;