css各种使用案例合集（一）_css示例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51478745/article/details/140680031

1、文字不换行、超出则省略为...

场景1：使 div 标签的文字内容不换行

代码示例：
<div class="nowrap-div">这是一段很长的文字，我们不会让它换行。</div>
.nowrap-div {  
  white-space: nowrap;  
}

场景2：div内容过长时，文字...

代码结果：

代码示例：

<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        .text-ellipsis {  
            width: 200px; /* 设置容器的宽度 */  
            white-space: nowrap; /* 保持内容在一行显示 */  
            overflow: hidden; /* 隐藏超出部分的内容 */  
            text-overflow: ellipsis; /* 超出部分显示省略号 */  
            border: 1px solid #000; /* 边框，便于观察效果 */  
        }  
    </style>  
</head>  
<body>  
  
<div class="text-ellipsis">  
    这是一段非常长的文本，当内容超出指定宽度时，将会以省略号（...）显示超出部分。  
</div>  
  
</body>  
</html>

场景3：div内容超过3行时，文字...

场景结果：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>  
    .text-ellipsis-multiline {  
      display: -webkit-box;  
      -webkit-box-orient: vertical;  
      -webkit-line-clamp: 3;  
      overflow: hidden;  
      text-overflow: ellipsis;  
      width: 220px;  
      line-height: 1.5;  
    }  
</style>  
</head>
<body>
  <div class="text-ellipsis-multiline">  
    这是一段非常长的文本，当内容超过三行时，将会以省略号（...）显示超出部分。请注意，这个效果在WebKit浏览器中效果最好，但其他浏览器可能不支持或显示效果有差异。  
  </div>  
</body>
</html>

2、步骤条

场景1：特殊样式的步骤条

场景结果：

代码示例：

<template>
  <div>
    <div class="step-tabs">
      <div v-for="(item,index) in tabs" :key="item.title" :class="item.isActive?'tab tab-active':'tab'" @click="changeTab(index)">{{ item.title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StepTabs',
  data() {
    return {
      // 5步骤列表
      tabs:[
        {
          isActive:true,
          title:'1.第一步',
        },
        {
          isActive:false,
          title:'2.第二步',
        },
        {
          isActive:false,
          title:'3.第三步',
        },
        {
          isActive:false,
          title:'4.第四步',
        },
        {
          isActive:false,
          title:'5.第五步',
        },
      ],
    };
  },
  methods: {
    changeTab(index){
      this.tabs.map(item=>item.isActive = false);
      this.tabs[index].isActive = true;
    },
  },
};
</script>

<style scoped lang="scss">
.step-tabs{
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  .tab{
    position: relative;
    width: 20%;
    background-color: #e6e8ec;
    text-align: center;
    padding: 8px;
    margin-right: 25px;
    cursor: pointer;
    &::before{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      left: 0;
      top: 0;
      border: solid 17.5px transparent;
      border-left-color: var(--devui-brand, #fff);
    }
    &::after{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      right: -34px;
      top: 1px;
      border: solid 17.5px transparent;
      border-left-color: var(--devui-brand, #e6e8ec);
    }
    &:nth-child(1):before{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      left: 0;
      top: 0;
      border: solid 17.5px transparent;
      border-left-color: var(--devui-brand, #e6e8ec);
    }
    &:nth-last-child(1)::after{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      right: -38px;
      top: 0;
      border: 0;
    }
  }
  .tab-active{
    color: #fff;
    border: 0;
    background-color: #2C8AEC;
    &::before{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      left: 0;
      top: 0;
      border: solid 17.5px transparent;
      border-left-color: var(--devui-brand, #fff);
    }
    &::after{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      right: -34px;
      top: 1px;
      border: solid 17.5px transparent;
      border-left-color: var(--devui-brand, #2C8AEC);
    }
    &:nth-child(1):before{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      left: 0;
      top: 0;
      border: solid 17.5px transparent;
      border-left-color: var(--devui-brand, #2C8AEC);
    }
  }
}
</style>

3、box-shadow阴影

场景1：给div标签加上阴影

场景结果：

基本语法：
element {  
  box-shadow: offset-x offset-y blur spread color inset;  
}
offset-x：阴影的水平偏移量。正值向右偏移，负值向左偏移
offset-y：阴影的垂直偏移量。正值向下偏移，负值向上偏移
blur：阴影的模糊半径。值越大，阴影越模糊。如果不设置（默认为 0），则阴影的边缘是清晰的
spread：阴影的扩展半径。正值会使阴影扩展并变得更大，负值会使阴影收缩并变得更小，默认为 0
color：阴影的颜色
inset：将外部阴影（outset）改为内部阴影。如果指定了这个值，则阴影会出现在元素内容的内侧，而不是外侧

代码示例：
<div class="box">
  <div class="box1">外部阴影</div>
  <div class="box2">内部阴影</div>
  <div class="box3">多个阴影</div>
  <div class="box4">底部阴影</div>
</div>
.box{
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  line-height: 100px;
  text-align: center;
  color: #fff;
}
.box1 {  
  width: 100px;  
  height: 100px;  
  background-color: rgb(56, 184, 56);  
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
}
.box2 {  
  width: 100px;  
  height: 100px;  
  background-color: skyblue;  
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);  
}
.box3 {  
  width: 100px;  
  height: 100px;  
  background-color: red;  
  box-shadow:   
    10px 10px 5px rgba(0, 0, 0, 0.6), /* 第一个阴影 */  
    -10px -10px 15px rgba(255, 0, 0, 0.4); /* 第二个阴影 */  
}
.box4{  
  width: 100px;  
  height: 50px; 
  line-height: 50px;
  color:#000; 
  background-color: #f0f0f0;  
    
  /* 添加底部阴影 */  
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.2);  
}

4、数据大屏方格背景

场景1：数据大屏的背景由深蓝色方块、灰白色边框的格子组成，并且要自适应各种屏幕大小

场景结果：

代码示例：

GridBack.vue页面

<template>
  <div>
    <div class="grid-background"></div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/styles/index.scss';

body{
  margin: 0;
}
.grid-background {
  width: vw-from-design(1920);/* 将1920px转换为vw */ 
  height: vh-from-design(1080);
  background-color: #012B5D;

  /* 设置背景大小为10px的格子，这样可以控制格子的大小 */  
  background-size: 50px 50px;
  
  /* 使用两个线性渐变来创建水平和垂直的线条效果 */  
  /* 第一个渐变创建水平线条（灰色和透明交替） */  
  /* 第二个渐变创建垂直线条（同样灰色和透明交替），并通过background-position偏移来避免与水平线条重合 */
  background-image:   
    linear-gradient(90deg, rgba(58, 150, 225, 0.225) 3%, transparent 0),  
    linear-gradient(rgba(58, 150, 225, 0.225) 3%, transparent 0);  
    
  /* 确保背景图像覆盖整个元素 */  
  background-position: 0 0, 0 1px; /* 偏移垂直渐变以避免与水平渐变重合 */  

  /* 确保背景图像不会重复 */
  background-repeat: repeat;
}
</style>

src\styles\index.scss封装方法

@use "sass:math";
// 默认设计稿的宽度
$designWidth: 1920;
// 默认设计稿的高度
$designHeight: 1080;

// px 转为 vw 的函数
@function vw-from-design($px) {
  @return math.div($px, $designWidth) * 100vw;
}

// px 转为 vh 的函数
@function vh-from-design($px) {
  @return math.div($px, $designHeight) * 100vh;
}