CSS3画图2

来源：互联网发布：kali linux树莓派编辑：程序博客网时间：2024/06/05 06:35
<span style="font-size:18px;"><!doctype html><html><head><meta charset="utf-8"><title>CSS3绘图</title></head><style type="text/css">div{width:200px;height:200px;border:#F00 solid 1px;margin-bottom:10px;text-align:center;vertical-align:middle;}/*4个角的半径全部是20px*/div:first-of-type{border-radius:20px;}/*第一个是上下，第二个是左右*/div:nth-of-type(2){border-radius:20px 40px;}/*上——左右——下*/div:nth-of-type(3){border-radius:20px 40px 60px;}/*上-右-下-左*/div:nth-of-type(4){border-radius:20px 40px 60px 80px;}div:nth-of-type(5){border-radius:0px 0px 200px;}/*做成一个整圆*/div:nth-of-type(6){border-radius:100px;}div:nth-of-type(7){border-radius:50%;}img{border-radius:50%;}</style><body><div>border-radius:20px;</div><div>border-radius:20px 40px;</div><div>border-radius:20px 40px 60px;</div><div>border-radius:20px 40px 60px;</div><div>border-radius:0px 0px 200px;</div><div>border-radius:100px;</div><div>border-radius:50%;</div><img src="img/face.jpg" width="200" height="200"></body></body></html><span style="color:#ff0000;">该案例直接运行查看结果。</span></span>
0 0