当前位置: 首页 > 面试题库 >

请使用css画一个圆,方法可以多种

董胡非
2023-03-14
本文向大家介绍请使用css画一个圆,方法可以多种相关面试题,主要包含被问及请使用css画一个圆,方法可以多种时的应答技巧和注意事项,需要的朋友参考一下
<div class="circle"></div>

1.border-radius

.cirlce{
 width:10vw; height:10vw; background:gray;
 border-radius:50%;
}

2.clip-path

.circle{
 width:10vw; height:10vw; background:gray;
 clip-path: circle();
}

3.svg background

.circle{
width:10vw; height:10vw; 
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%25' cy='50%25' r='50%25' fill='gray'/%3E%3C/svg%3E");
}

4.radial-gradient

.circle{
 width:10vw; height:10vw; 
 background:radial-gradient(gray 70%, transparent 70%);
}

5.font

.circle::after {
    content: "●";
    font-size: 10vw;//字体实际大小
    line-height: 1;
}

6.mix-blend-mode

.circle{
 width: 10vw;height: 10vw;background: gray;
}
.circle::after {
    content: "";display: block;width: 10vw;height: 10vw;
    mix-blend-mode: lighten;
    background: radial-gradient(#000 70%, #fff 70%);
}
 类似资料:
  • 本文向大家介绍请使用canvas画一个椭圆相关面试题,主要包含被问及请使用canvas画一个椭圆时的应答技巧和注意事项,需要的朋友参考一下 <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ct

  • 本文向大家介绍请使用CSS画一个带锯齿形边框圆圈相关面试题,主要包含被问及请使用CSS画一个带锯齿形边框圆圈时的应答技巧和注意事项,需要的朋友参考一下 https://stackoverflow.com/questions/51697207/zig-zag-border-for-a-circle

  • 本文向大家介绍有使用过svg吗?请用svg画一个圆相关面试题,主要包含被问及有使用过svg吗?请用svg画一个圆时的应答技巧和注意事项,需要的朋友参考一下

  • 本文向大家介绍用CSS画出一个任意角度的扇形,可以写多种实现的方法相关面试题,主要包含被问及用CSS画出一个任意角度的扇形,可以写多种实现的方法时的应答技巧和注意事项,需要的朋友参考一下 四个半圆叠加,过半调整z-index: https://codepen.io/liuxiaole-the-sasster/full/RzQBKV

  • 本文向大家介绍C#使用GDI画圆的方法,包括了C#使用GDI画圆的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了C#使用GDI画圆的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的C#程序设计有所帮助。

  • 本文向大家介绍用css画出一个圆圈,里面有个对号相关面试题,主要包含被问及用css画出一个圆圈,里面有个对号时的应答技巧和注意事项,需要的朋友参考一下