9、css花格边框效果

cyz141001

于 2024-06-02 11:43:36 发布

阅读量192

点赞数 1

分类专栏：前端微型项目文章标签： css 前端

本文链接：https://blog.csdn.net/cyz141001/article/details/139389212

版权

前端微型项目专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果例图：

1、html代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./3.css" />
    <title>Document</title>
</head>

<body>
    <div class="card">
        <div class="container">
            Firstly, I often walk to school. It can reduce air pollution. Secondly, I always turn off the lights and fans when leaving the classroom. Thirdly, I always make full use of paper and other school things and never waste water
        </div>
    </div>
</body>
</html>

2、css代码：

.card{
    width: 300px;
    margin: 0 auto;
    font-family: 'Courier New', Courier, monospace;
    color: #333;
    font-style: italic;
    line-height: 1.8;
    border-radius: 10px;
    background: repeating-linear-gradient(
        -45deg,
        #e8544d 0px 10px,
        #fff 10px 20px,
        #008c8c 20px 30px,
        #fff 30px 40px
        );
    padding: 5px;
}
.container{
    background: #fff;
    border-radius: inherit;
}