CSS3画图2

最新推荐文章于 2022-10-20 12:35:14 发布

lkk1344

最新推荐文章于 2022-10-20 12:35:14 发布

阅读量602

点赞数

分类专栏： html/css/js/jquery 文章标签： css3

本文链接：https://blog.csdn.net/lkk1344/article/details/49914015

版权

html/css/js/jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<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>