关闭

CSS3画图2

标签: css3
144人阅读 评论(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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:14822次
    • 积分:783
    • 等级:
    • 排名:千里之外
    • 原创:65篇
    • 转载:1篇
    • 译文:0篇
    • 评论:4条
    文章存档
    最新评论