css条纹效果

最新推荐文章于 2024-05-24 19:40:36 发布

qq_48354174

最新推荐文章于 2024-05-24 19:40:36 发布

阅读量192

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_48354174/article/details/114589337

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

在这里插入图片描述

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

在这里插入图片描述

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