众所周知,用CSS3的圆角、转换可以画出各种不同的形状,制作不同的图案,早些前先驱者已画出经典的叮当猫,iphone手机等展示CSS3的强大实力,趁最近有空我也对CSS3进行了一些实践,颇有收获。

用border边框属性可以画出各种三角形,矩形,用border-radius可以画出何种圆形、扇形、圆弧型,利用内置阴影外置阴影可以有各种投影效果,只要你去尝试就好发现可以出来各种形状

结合实践画了个会动的小黄人

地址http://play.163.com/special/minions/

实践中的收获:

收获一:发现在制作CSS3卡通动画的时候圆角渲染出来的弧线会有锯齿问题,最后发现之是因为终端显示设备的呈现问题,在MAC的视网膜屏 @2x下看就会好很多

收获二:关于border-radius的属性问题,之前项目中应用一般直接是配置一个值用作圆角,其实border-radius内部还有很多讲究。

可以对其设置1-4个值(可以用px、em、%),最完整的为border-radius:25px 10px 50px 0;//左上角、右上角、右下角、左下角(顺时针顺序)

当然也可以对其分别设置,比如,

  * border-top-left-radius
  * border-top-right-radius
  * border-bottom-right-radius
  * border-bottom-left-radius
 
另外,对某一个圆角的水平半径跟垂直半径可以单独设置,简言之可以让它成为椭圆的角,写法是用/区分,比如border-radius:50px/25px;
border-radius还可以用斜杠设置第二组值。这时,第一组值表示水平半径,第二组值表示垂直半径。第二组值也可以同时设置1到4个值,应用规则与第一组值相同。
border-radius: 100px 25px 80px 5px / 45px 25px 30px 15px;

例子 2

border-radius: 2em 1em 4em / 0.5em 3em;

等价于:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; 参考链接:http://www.w3school.com.cn/cssref/pr_border-radius.asp
http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-border-radius.html

关于用CSS3画图形的一些思考的更多相关文章

  1. 用CSS3绘制图形

    参考资料:http://blog.csdn.net/fense_520/article/details/37892507 本文非转载,为个人原创,转载请先联系博主,谢谢~ 准备: <!DOCTY ...

  2. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

  3. 使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...

  4. css3之图形绘制

    由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...

  5. matlab画图形函数 semilogx

    matlab画图形函数 semilogx loglog 主要是学习semilogx函数,其中常用的是semilogy函数,即后标为x的是在x轴取对数,为y的是y轴坐标取对数.loglog是x y轴都取 ...

  6. 纯CSS3画出小黄人并实现动画效果

    前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

  7. 如何使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易 的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...

  8. openlayers画图形返回范围

    //画图形返回圖形的范围 var polygonLayer = new OpenLayers.Layer.Vector("选择范围"); var drawControls = ne ...

  9. 如何用CSS3画出一个立体魔方?

    前言 最近在写<动画点点系列>文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎 ...

随机推荐

  1. git 相关

    github入门   一.先了解 相比CVS\SVN优势: - 支持离线开发,离线Repository- 强大的分支功能,适合多个独立开发者协作- 速度快 github 本地有仓库,储存着所有repo ...

  2. 百度地图api简单使用方法

    百度地图API的使用方法   百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

  3. 一个最小化的SpringBoot项目

    项目结构 项目基于Maven管理,注意使用了父pom <parent> <groupId>org.springframework.boot</groupId> &l ...

  4. 百度地图API示例之设置地图显示范围

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  5. mac 下 终端常用命令

    open . 打开当前路径下的文件夹 open (路径) 打开此路径下的文件夹 (路径:/Users/linger/Library/Application\ Support/Google/Chrome ...

  6. http的header参数有关

    1.读文件 a.如果经过php处理:变成mime:text/html,在浏览器可以打开.否则是下载 b.phpui如果加上参数resid=01,那么返回的数据的Content-Type:applica ...

  7. PIC32MZ tutorial -- Watchdog Timer

    Watchdog is a very necessary module for embedded system. Someone said that embedded system operates ...

  8. ---Under Ubuntu 14.04

    Thinprint provides driver-free printing. Do you wish to enable this feature? [yes] Disabling timer-b ...

  9. MySQL计算销售员昨日各指标综合得分_20161206

    数据需求如上,新增重激活以15天未下单为界定 SELECT d.销售员,(日销售额得分*0.6+日新增客户数得分*0.15+日客单价得分*0.1+日客户平均产品数得分*0.15)AS 综合得分,日销售 ...

  10. 手把手教你编写一个具有基本功能的shell(已开源)

    刚接触Linux时,对shell总有种神秘感:在对shell的工作原理有所了解之后,便尝试着动手写一个shell.下面是一个从最简单的情况开始,一步步完成一个模拟的shell(我命名之为wshell) ...