css3画圆

本文详细介绍了CSS3中使用border-radius属性来创建圆形和圆角元素的方法,包括基本用法、不同圆角效果展示及实例应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

css3画圆程序:主要是border-radius的使用

<!doctype html> <html> <head> <meta charset="utf-8"> <title>border-radius</title> 

<style type="text/css">
div.circle{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
} 
/*任务部分*/
div.semi-circle
{ 
height:100px; 
width:50px;
background:#9da; 
border-radius:50px 0 0 50px; 
} 
</style> 
</head> 
<body>
    <div class="circle"></div>
    <br/> 
    <!--任务部分-->
    <div class="semi-circle"> </div> 
</body> 
</html>


css3圆角效果:

border-radius:10px; /* 所有角都使用半径为10px的圆角 */ 

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值