CSS3画图2

原创 2015年11月18日 22:21:48
<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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

css3常用画图代码

  • 2017年10月31日 16:19
  • 3KB
  • 下载

CSS3新属性—2D维度以及过渡

CSS3新增的一些2D、3D以及动画模块等可以帮助我们轻松完成一些有趣的小动画,在一定程度上可以代替javascript完成某些动态效果。它和普通的css用法一样由属性和属性值组成,属性为transf...

CSS3-2D及3D效果以及过渡

CSS转动2D效果概念:通过 CSS3 中的属性,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 实现2D或3D效果。 使用transform属性来实现,该属性的值是几个函数。主要2d转换函数: ...

transform属性——css3变形效果2D

一、transform           该属性允许我们对元素进行移动、缩放、旋转或倾斜 transform的属性值如下所示: 1、none                    无变换 2、tr...
  • MOONCOM
  • MOONCOM
  • 2017年01月15日 20:58
  • 593

疯狂 HTML5 CSS3 JavaScript讲义.part2

  • 2016年01月08日 12:08
  • 13MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3画图2
举报原因:
原因补充:

(最多只允许输入30个字)