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

最終實現效果：