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绘制图形

准备: - UED - xxx按需更改。
  • xzh_loop
  • xzh_loop
  • 2014年07月21日 21:45
  • 3105

Html5 Canvas 系列_绘图三(H5 ,CSS3 动态八卦图)

使用 html5 css3 实现一个动态八卦图,并能实现转动,太极生二仪;
  • u014266877
  • u014266877
  • 2017年01月19日 16:57
  • 1346

css3画图之大白(●—●)

大白                                               *,body {                             margin...
  • qq_15980201
  • qq_15980201
  • 2017年10月17日 10:34
  • 131

CSS3小技巧之画图

在前端开发过程中有时我们需要一些小型图标,而类似小图标的图片由于不好操作或背景的原因会造成整体的效果,因而我们需要用到CSS3中的一些小技巧来画出一些小图标。...
  • u013027071
  • u013027071
  • 2016年10月20日 23:28
  • 77

css3学习以及移动端开发基本概念的思考

--> 此时在所有的手机上都是document.document.clientWidth,也就是[layout viewport!!!]都是400px;  在渲染页面之前,浏览器需要知道layo...
  • liangklfang
  • liangklfang
  • 2016年07月17日 14:19
  • 1575

CSS3和Canvas动画

demo演示github源码地址CSS3动画基本知识准备animation属性结合自定义动画@keyframes的使用,改变元素的相应属性制作动画效果。animation属性: animation-n...
  • mzzzzq
  • mzzzzq
  • 2016年09月17日 16:19
  • 2475

响应式Web设计:HTML5和CSS3实战 pdf版

响应式Web设计:HTML5和CSS3实战 pdf版下载地址: http://www.jb51.net/books/90842.html#down...
  • hr8610
  • hr8610
  • 2014年03月24日 19:52
  • 1171

基于CSS3的自适应布局技术

最近在做uOS APP的布局,研究了一下CSS3自适应布局技术在IE10+中的应用,其他标准浏览器由于具有自动更新功能,只需兼容最近的几个版本就行了——因此我们可以用CSS3来提高工作效率。 ...
  • leeandmins
  • leeandmins
  • 2015年09月29日 15:18
  • 520

最全的 CSS2.1 和 CSS3+ 的区别一览

大家都知道我们习惯性称作的 CSS3 对于 CSS2.1 有很多的修改和补充。抛开浏览器的兼容性问题,这篇文章把所有的变化整理到一篇文章中便于学习和查阅。尽管我尽量确保收录了所有的新特性,但是不能保证...
  • zhangquan_zone
  • zhangquan_zone
  • 2017年08月17日 12:14
  • 116

CSS2与CSS3布局方式比较

本文主要介绍了CSS2与CSS3布局方式的不同,通过二者的对比得出CSS3布局的优势...
  • fengyinchao
  • fengyinchao
  • 2015年07月02日 21:02
  • 496
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3画图2
举报原因:
原因补充:

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