1.条纹
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/f50745151242004113bd9ed615eb8d0f.png)
代码:
<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
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/951aa42848df15650d96f2a298b63664.png)
代码:
<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.条纹
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/980b6e75030983639908e9051ef586d5.png)
代码:
<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>
方法二:
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/2e685334c0d42db5f78c4bbcad636929.png)
<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>
方法三:
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/e7ba12351088e7d414bd9a4bbace0661.png)
<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
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/6beb7ee9582f8139dee73de98a370e9f.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-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
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/a5875e2ad887aca9db01deaaa6f13b89.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:linear-gradient(0deg,white 1px, transparent 0),linear-gradient(90deg,white 1px, transparent 0);
background-size:30px 30px;
}
</style>
5
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/7921437b8d6007caa1781026b3c2d1aa.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:
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
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/40a7816d5cae202d9d676abb0a300709.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:linear-gradient(45deg,#fff 25%, transparent 25%),linear-gradient(-45deg,#fff 25%, transparent 25%);
background-size:30px 30px;
}
</style>
7
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/988bd0e223f928a804d43890c55d2111.png)
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>
方法二
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/1015dc683f58bb7a8928bb829aaef122.png)
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
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/ccc18b8e0308ad30f057926b8cea248b.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:
/*下三角向下移动至下一个三角,向下形成正方形*/
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>