css条纹效果

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>

4

在这里插入图片描述

<template>
    <view class="">
        <view class="test2"></view>     
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    };
</script>

<style lang="scss" scoped>
    .test2{
        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>

5
在这里插入图片描述

<template>
    <view class="">
        <view class="test2"></view>     
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    };
</script>

<style lang="scss" scoped>
    .test2{
        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>

在这里插入图片描述

<template>
    <view class="">
        <view class="test2"></view>     
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    };
</script>

<style lang="scss" scoped>
    .test2{
        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>

在这里插入图片描述

<template>
    <view class="">
        <view class="test2"></view>     
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    };
</script>

<style lang="scss" scoped>
    .test2{
        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>

在这里插入图片描述

<template>
    <view class="">
        <view class="test2"></view>     
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    };
</script>

<style lang="scss" scoped>
    .test2{
        width: 100%;
        height: 460rpx;
        background:#ff6a00;
        background-image:radial-gradient(#fff 20%, transparent 0);
        background-size:60px 60px;
    }
    
</style>

方法二

<template>
    <view class="">
        <view class="test2"></view>     
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    };
</script>

<style lang="scss" scoped>
    .test2{
        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>

在这里插入图片描述

<template>
    <view class="">
        <view class="test2"></view>     
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    };
</script>

<style lang="scss" scoped>
    .test2{
        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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值