建站资讯

怎样根据CSS画圆

作者:admin 发布时间:2020-11-18

1) 怎样根据CSS画含有黑影的实心圆

div{

width: 50px;
height: 50px;
background-color: yellow;
border-radius: 25px; 
box-shadow: 5px 5px 5px #888888; 

}


2) 中空圆border值尽量小,不设定情况色调。
div{
width: 50px;
height: 50px;
border: 1px blue solid;
border-radius: 25px;

}


3) 虚线圆
div{
width: 50px;
height: 50px;
border: 1px blue dashed;
border-radius: 25px;

}


4) 四分之一圆:宽高设定一样,border-radius设定和宽高一样尺寸,而且只设定一个半径。
div{
width: 50px;
height: 50px;
background-color: blue;
border-radius: 50px 0 0 0;

}


       

5) 半圆:高宽比设定为总宽的一半,border-radius设定为宽高的一半,而且只设定2个半径


HTML编码:

 

html lang= en  

head  

meta charset= UTF-8  

    title 月儿 /title  

    style  

 .test{ 

 background-color: black; 

 width: 120px; 

 height: 120px; 

 } 

 .cir1{ 

 width: 100px; 

 height: 100px; 

 border-radius: 50px; 

 background-color: white; 

 float: left; 

 position: relative; 

 } 

 .cir2{ 

 width: 96px; 

 height: 96px; 

 border-radius: 48px; 

 background-color: black; 

 float: left; 

 position: absolute; 

 margin-left: 20px; 

 } 

  /style  

head  

  body  

  div  >

      div  >

        div  >

    /div  

body  

/html  




收缩