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

1. 标准文档流1.1 当浏览器解析网页的时候,遵循从从上到下,从左到右的顺序来进 行解析; 1.2 块级元素和行内元素的特性:如果元素一旦离开了标准文档流,那么这些特性将不会存在; 1.3 ...

CSS3 2D模拟摩天轮旋转

先看效果图,后面有详细代码。

Sublime Text2的CSS3插件

2-面试题-HTML5+CSS3(前端常见面试题带答案 )

HTML5+CSS3常见面试题目 1.    SGML(标准通用标记语言)和HTML(超文本标记语言),XML(可扩展标记语言)和HTML的之间有什么关系?        ...

疯狂HTML5 CSS3 JavaScript讲义-2

  • 2017-08-19 21:56
  • 13.00MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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