1.条纹
效果图：
代码：
<template>
<view class="">
<view class="test"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.test {
width: 100%;
height: 460rpx;
background:linear-gradient(#ffaa00 50%, #ff6a00 50%);
background-size:100% 20px;
}
</style>
2
效果图：
代码：
<template>
<view class="">
<view class="test"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.test {
width: 100%;
height: 460rpx;
background:linear-gradient(45deg, #ffaa00 50%, #ff6a00 50%);
background-size:30px 30px;
}
</style>
3.条纹
效果图：
代码：
<template>
<view class="">
<view class="test"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.test {
width: 100%;
height: 460rpx;
/*#ff6a00 0中0表示此之前最大数，即#ff6a00 25%*/
/*此处设置0，为了减少重复性，方便维护*/
background:linear-gradient(45deg, #ffaa00 25%, #ff6a00 0,#ff6a00 50%,#ffaa00 0%,#ffaa00 75%,#ff6a00 0);
background-size:30px 30px;
}
</style>
方法二：
效果图：
<template>
<view class="">
<view class="test"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.test {
width: 100%;
height: 460rpx;
/*让repeating-linear-gradient自动填充，可以任意修改角度，直接指定线条宽度15px*/
background:repeating-linear-gradient(45deg, #ffaa00, #ffaa00 15px, #ff6a00 0,#ff6a00 30px);
}
</style>
方法三：
效果图：
<template>
<view class="">
<view class="test"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.test {
width: 100%;
height: 460rpx;
background:#ff6a00;
/*背景图上直接叠加一层半透明白色条纹*/
background-image:repeating-linear-gradient(45deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1)15px,transparent 0,transparent 30px);
}
</style>
3
效果图：
代码：
<template>
<view class="">
<view class="test2"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.test {
width: 100%;
height: 460rpx;
background-color: #fff;
background-image:linear-gradient(0deg, rgba($color: #ff6a00, $alpha:.5) 50%, transparent 50%),linear-gradient(90deg,rgba($color: #ff6a00, $alpha:.5) 50%, transparent 50%) ;
background-size:30px 30px;
}
</style>
4
效果图：
代码：
<template>
<view class="">
<view class="test2"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.test {
width: 100%;
height: 460rpx;
background:#ff6a00;
// 线条
background-image:linear-gradient(0deg,white 1px, transparent 0),linear-gradient(90deg,white 1px, transparent 0);
background-size:30px 30px;
}
</style>
5
效果图：
代码：
<template>
<view class="">
<view class="test2"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.test {
width: 100%;
height: 460rpx;
background:#ff6a00;
// 线条
background-image:
linear-gradient(0deg,hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(90deg,hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(0deg,white 2px, transparent 0),
linear-gradient(90deg,white 2px, transparent 0);
background-size:15px 15px,15px 15px,75px 75px,75px 75px;
}
</style>
6
效果图：
代码：
<template>
<view class="">
<view class="test2"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.test {
width: 100%;
height: 460rpx;
background:#ff6a00;
background-image:linear-gradient(45deg,#fff 25%, transparent 25%),linear-gradient(-45deg,#fff 25%, transparent 25%);
background-size:30px 30px;
}
</style>
7
效果图：
image.png
代码：
<template>
<view class="">
<view class="test2"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.test {
width: 100%;
height: 460rpx;
background:#ff6a00;
background-image:radial-gradient(#fff 20%, transparent 0);
background-size:60px 60px;
}
</style>
方法二
效果图：
image.png
代码：
<template>
<view class="">
<view class="test2"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.test {
width: 100%;
height: 460rpx;
background:#ff6a00;
background-image:radial-gradient(#fff 20%, transparent 0),radial-gradient(#fff 20%, transparent 0);
background-size:60px 60px;
background-position: 0 0 ,30px 30px;
}
</style>
9
效果图：
代码：
<template>
<view class="">
<view class="test2"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.test {
width: 100%;
height: 460rpx;
background:#ff6a00;
background-image:
/*下三角向下移动至下一个三角，向下形成正方形*/
linear-gradient(45deg,hsla(0,0%,100%,.3) 25%, transparent 0),linear-gradient(45deg,transparent 75%, hsla(0,0%,100%,.3) 0),
/*上三角下形成上正方形*/
linear-gradient(45deg,transparent 75%, hsla(0,0%,100%,.3) 0),linear-gradient(45deg,hsla(0,0%,100%,.3) 25%, transparent 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}
</style>
