CSS样式学习

上一篇文章讲到如何创建一个脚手架程序，目前我们已经有了一个nextjs的基本框架，因此我们可以在这个基础上进行改造。
打开我们项目中的page.tsx页面，这里是程序的主页面，也就是我们访问地址时候第一个看见的页面

前言

安全区域与边界是iOS11 新增特性。

安全区域

安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响。

Webkit 为此增加了相应的CSS 函数（env, constant）用于获取安全区域边界值。

自己制作好看的炫酷的3D桌面背景，复制替换即可。

可用鼠标任意调整角度

1.首先创建一个.html文件，再复制文章结尾的代码进去。

2.创建images文件夹存放图片，如图：

#头条创作挑战赛#

一、分析与说明

在CSS大家肯定知道如何设一个圆角矩形，或者把一个div设成圆型，很简单，直接设置就行了，比如border-radius:5px; border-radius:50%; 或者你可以只设置一个角的弧度：

border-top-right-radius: 20px;

但其实，这个css 属性可以接受两个参数，一个是水平弧度，一个是垂直弧度，会产生奇怪的效果。看下图右上角设置不同值的变化。

我们先看一下组件效果图：

使用代码如下：

<template>
    <div class="badge">
        <ul>
            <li>
                <wt-align>
                    <wt-badge title="" ></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="" type="primary"></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="1" ></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="1" type="primary"></wt-badge>
                </wt-align>
            </li>
             <li>
                <wt-align>
                    <wt-badge title="99" ></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="99+" type="primary"></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="拒绝" ></wt-badge>
                </wt-align>
            </li>
            <li>
                <wt-align>
                    <wt-badge title="生效中" type="primary"></wt-badge>
                </wt-align>
            </li>
        </ul>
    </div>
</template>
<script>
import { ref } from 'vue'

import Badge from '@/components/Badge.vue'

export default {
  components: {
    "wt-badge": Badge
  },
  setup () {
    const dashed = ref(true)
    return {
      dashed
    }
  }
}
</script>
<style lang="less" scoped>
 ul {
   li {
     display: block;
     margin: 10px;
   }
 }
</style>