css各种使用案例合集（一）

1、文字不换行

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

1. <div class="nowrap-div">这是一段很长的文字，我们不会让它换行。</div>

复制代码

1. .nowrap-div {  
2.   white-space: nowrap;  
3. }

复制代码

2、步骤条

   场景2：特殊样式的步骤条
  场景效果：
  

  代码示例：

1. <template>
2.   <div>
3.     <div class="step-tabs">
4.       <div v-for="(item,index) in tabs" :key="item.title" :class="item.isActive?'tab tab-active':'tab'" @click="changeTab(index)">{{ item.title }}</div>
5.     </div>
6.   </div>
7. </template>
9. <script>
10. export default {
11.   name: 'StepTabs',
12.   data() {
13.     return {
14.       // 5步骤列表
15.       tabs:[
16.         {
17.           isActive:true,
18.           title:'1.第一步',
19.         },
20.         {
21.           isActive:false,
22.           title:'2.第二步',
23.         },
24.         {
25.           isActive:false,
26.           title:'3.第三步',
27.         },
28.         {
29.           isActive:false,
30.           title:'4.第四步',
31.         },
32.         {
33.           isActive:false,
34.           title:'5.第五步',
35.         },
36.       ],
37.     };
38.   },
39.   methods: {
40.     changeTab(index){
41.       this.tabs.map(item=>item.isActive = false);
42.       this.tabs[index].isActive = true;
43.     },
44.   },
45. };
46. </script>
48. <style scoped lang="scss">
49. .step-tabs{
50.   display: flex;
51.   justify-content: space-between;
52.   margin-bottom: 16px;
53.   .tab{
54.     position: relative;
55.     width: 20%;
56.     background-color: #e6e8ec;
57.     text-align: center;
58.     padding: 8px;
59.     margin-right: 25px;
60.     cursor: pointer;
61.     &::before{
62.       content: "";
63.       width: 0;
64.       height: 0;
65.       position: absolute;
66.       left: 0;
67.       top: 0;
68.       border: solid 17.5px transparent;
69.       border-left-color: var(--devui-brand, #fff);
70.     }
71.     &::after{
72.       content: "";
73.       width: 0;
74.       height: 0;
75.       position: absolute;
76.       right: -34px;
77.       top: 1px;
78.       border: solid 17.5px transparent;
79.       border-left-color: var(--devui-brand, #e6e8ec);
80.     }
81.     &:nth-child(1):before{
82.       content: "";
83.       width: 0;
84.       height: 0;
85.       position: absolute;
86.       left: 0;
87.       top: 0;
88.       border: solid 17.5px transparent;
89.       border-left-color: var(--devui-brand, #e6e8ec);
90.     }
91.     &:nth-last-child(1)::after{
92.       content: "";
93.       width: 0;
94.       height: 0;
95.       position: absolute;
96.       right: -38px;
97.       top: 0;
98.       border: 0;
99.     }
100.   }
101.   .tab-active{
102.     color: #fff;
103.     border: 0;
104.     background-color: #2C8AEC;
105.     &::before{
106.       content: "";
107.       width: 0;
108.       height: 0;
109.       position: absolute;
110.       left: 0;
111.       top: 0;
112.       border: solid 17.5px transparent;
113.       border-left-color: var(--devui-brand, #fff);
114.     }
115.     &::after{
116.       content: "";
117.       width: 0;
118.       height: 0;
119.       position: absolute;
120.       right: -34px;
121.       top: 1px;
122.       border: solid 17.5px transparent;
123.       border-left-color: var(--devui-brand, #2C8AEC);
124.     }
125.     &:nth-child(1):before{
126.       content: "";
127.       width: 0;
128.       height: 0;
129.       position: absolute;
130.       left: 0;
131.       top: 0;
132.       border: solid 17.5px transparent;
133.       border-left-color: var(--devui-brand, #2C8AEC);
134.     }
135.   }
136. }
137. </style>

复制代码

3、box-shadow阴影

   场景3：给div标签加上阴影
  场景效果：
  

  基本语法：

1. element {  
2.   box-shadow: offset-x offset-y blur spread color inset;  
3. }

复制代码

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

  代码示例：

1. <div class="box">
2.   <div class="box1">外部阴影</div>
3.   <div class="box2">内部阴影</div>
4.   <div class="box3">多个阴影</div>
5. </div>

复制代码

1. .box{
2.   width: 100%;
3.   display: flex;
4.   justify-content: space-around;
5.   margin-top: 20px;
6.   line-height: 100px;
7.   text-align: center;
8.   color: #fff;
9. }
10. .box1 {  
11.   width: 100px;  
12.   height: 100px;  
13.   background-color: rgb(56, 184, 56);  
14.   box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.6);
15. }
16. .box2 {  
17.   width: 100px;  
18.   height: 100px;  
19.   background-color: skyblue;  
20.   box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);  
21. }
22. .box3 {  
23.   width: 100px;  
24.   height: 100px;  
25.   background-color: red;  
26.   box-shadow:   
27.     10px 10px 5px rgba(0, 0, 0, 0.6), /* 第一个阴影 */  
28.     -10px -10px 15px rgba(255, 0, 0, 0.4); /* 第二个阴影 */  
29. }

复制代码

4、数据大屏方格配景

   场景4：数据大屏的配景由深蓝色方块、灰白色边框的格子组成，而且要自适应各种屏幕巨细
  场景效果：
  

  代码示例：
  GridBack.vue页面

1. <template>
2.   <div>
3.     <div class="grid-background"></div>
4.   </div>
5. </template>
7. <style lang="scss" scoped>
8. @import '@/styles/index.scss';
10. body{
11.   margin: 0;
12. }
13. .grid-background {
14.   width: vw-from-design(1920);/* 将1920px转换为vw */
15.   height: vh-from-design(1080);
16.   background-color: #012B5D;
18.   /* 设置背景大小为10px的格子，这样可以控制格子的大小 */  
19.   background-size: 50px 50px;
20.   
21.   /* 使用两个线性渐变来创建水平和垂直的线条效果 */  
22.   /* 第一个渐变创建水平线条（灰色和透明交替） */  
23.   /* 第二个渐变创建垂直线条（同样灰色和透明交替），并通过background-position偏移来避免与水平线条重合 */
24.   background-image:   
25.     linear-gradient(90deg, rgba(58, 150, 225, 0.225) 3%, transparent 0),  
26.     linear-gradient(rgba(58, 150, 225, 0.225) 3%, transparent 0);  
27.    
28.   /* 确保背景图像覆盖整个元素 */  
29.   background-position: 0 0, 0 1px; /* 偏移垂直渐变以避免与水平渐变重合 */  
31.   /* 确保背景图像不会重复 */
32.   background-repeat: repeat;
33. }
34. </style>

复制代码

src\styles\index.scss封装方法

1. @use "sass:math";
2. // 默认设计稿的宽度
3. $designWidth: 1920;
4. // 默认设计稿的高度
5. $designHeight: 1080;
7. // px 转为 vw 的函数
8. @function vw-from-design($px) {
9.   @return math.div($px, $designWidth) * 100vw;
10. }
12. // px 转为 vh 的函数
13. @function vh-from-design($px) {
14.   @return math.div($px, $designHeight) * 100vh;
15. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。