支付宝扫码
领取余额宝体验金

轻云博客 > DIV+CSS > 如何通过CSS画圆

如何通过CSS画圆

作者:如何建网站 / 日期:2018-6-3 8:12:00 / 分类:DIV+CSS / 浏览:596

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设置为宽高的一半,并且只设置两个半径


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 class="test">  

     <div class="cir1"></div>  

        <div class="cir2"></div>  

    </div>  

<body>  

</html>  



本文标签:如何建网站
From:
分享到: