用vue实现彩虹

在template添加一个div,具体代码如下：

<template>

    <div class="head"></div>

</template>

用css对div的内容进行修饰。首先创建一个背景为粉红色，半径为100px的圆。

<style>
  .head{
    width: 200px;
    height: 200px;
    background: pink;
    border-radius: 50%;
  }
</style>

然后在对圆中内容进行更改。

<style>
  .head{
    width: 200px;
    height: 200px;
    background: pink;
    border-radius: 50%;
    box-shadow:
    0 0 0 5px inset red,
    0 0 0 10px inset orange,
    0 0 0 15px inset yellow,
    0 0 0 20px inset lime,
    0 0 0 25px inset aqua,
    0 0 0 30px inset blue,
    0 0 0 35px inset magenta;
    clip-path:polygon(0 0,100% 0,100% 50%,0 50%);
  }
</style>

 polygon

1. 值为多个座标点组成，根据多个座标形成一个半圆。

去掉背景色内容。

<style>
  .head{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow:
    0 0 0 5px inset red,
    0 0 0 10px inset orange,
    0 0 0 15px inset yellow,
    0 0 0 20px inset lime,
    0 0 0 25px inset aqua,
    0 0 0 30px inset blue,
    0 0 0 35px inset magenta;
    clip-path:polygon(0 0,100% 0,100% 50%,0 50%);
  }
</style>

最终实现效果：