css笔记

.slice(0,2)

选择最后一个元素:last-child

水平线<hr />

滑动背景图片不动background-attachment: fixed;

filter:grayscale(100%)//网站变黑白

左到右渐变色background-image: linear-gradient(to right, #fefaf2, #fef2e8,#fdebdf);

鼠标经过变手型cursor-pointer

解决英文或者数字在div盒子里面会超出来的问题word-wrap: break-word;

铺满盒子的背景图片大小属性cover；

文本获取焦点的方法autofocus="autofocus"

文字字间距text-align: justify;

调整单词间的间距word-spacing: -2px;

文本溢出变...text-overflow:ellipsis;

旋转 div 元素transform:rotate(72deg);

水平翻转    transform: scaleX(1);

英文超出强制换行word-break:break-all;

:before在前面添加内容

bottom: env(safe-area-inset-bottom); 兼容iOS底部黑条

:after在后面添加内容

width: calc(33.3% - 15rpx);平分div3份

text-decoration:underline添加下划线

图片水平居中vertical-align:middle;

水平居中transform: translate(0, -50%);

word-break:break-all; 强制换行   

 

内容垂直居中1

 display: grid;

 align-items: center;

 

grid items-center

 

内容垂直居中2

  display: flex;

  flex-direction: column;

  justify-content: space-evenly;

 

flex justify-center items-center

 

div平均分3个，超过3个换行

display: grid;

 grid-template-columns: repeat(3, 1fr);  

grid-gap: 10px;

 

网格容器 每一行两个元素超过换行  grid grid-cols-2 gap-4

 

a:active  {

            opacity: .9;

              box-shadow: 0 0 .8rem rgba(0, 0, 0, .3);

            transform: perspective(20rem) translateZ(-.5rem) scale(1);

        }

 

<meta name="viewport" content="width=device-width">取消click延迟300秒

 

 

文字渐变 background: linear-gradient(to right, #e667e8, #a761f5);

        -webkit-background-clip: text;

        color: transparent;

 

 

字间距letter-spacing:2px;

 

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

 

标签最多显示两行超过...显示

overflow: hidden;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

 

input输入框禁用disabled=“disabled”

精灵图缩小界面transform: scale(0.5)

 

 隐藏滚动条.location_list::-webkit-scrollbar {

            display: none;

        }

 

解决Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示

可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

 

 

 

 

::v-deep

 

画一个三角形

.a {

    width: 0;

    height: 0;

    border-width: 100px;

    border-style: solid;

    border-color: transparent #0099CC transparent transparent;

    transform: rotate(90deg); /*顺时针旋转90°*/

}

<div class="a"></div>

 

absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2

 

----js

//判断多行

if( [1,2,3,4,5].includes(type) ){

   //...

}

avatar

import useUserStore from '@/store/user';

const userStore = useUserStore();

 

 

el-date-picker

            v-model="page.createTime"

            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"

            value-format="YYYY-MM-DD HH:mm:ss"

            type="daterange"

            range-separator="至"

            start-placeholder="开始时间"

            end-placeholder="结束时间"

            :size="size"

          />

 

 

import { useI18n } from "vue-i18n";

const { locale } = useI18n();

 

locale.value = 'en'

uni.setStorageSync("lang", 'en')