css各种使用案例合集（一） - IT评测·应用市场-qidao123.com

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

复制代码

.nowrap-div {
white-space: nowrap;
}

复制代码

<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>

复制代码

element {
box-shadow: offset-x offset-y blur spread color inset;
}

复制代码

<div class="box">
<div class="box1">外部阴影</div>
<div class="box2">内部阴影</div>
<div class="box3">多个阴影</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); /* 第二个阴影 */
}

复制代码

<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>

复制代码

@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;
}

复制代码