http://blog.sina.com.cn/s/blog_61671b520101gelr.html

border-radius

border-radius: 50px 20px;上下都是50px,左右是20px

border-radius:50px 0px 30px; 上50px 左右0px 下30px;

圆和椭圆的区别在于,椭圆的长短半轴不相等

border-radius还可以用斜杠设置第二组值。这时,第一组值表示水平半径,第二组值表示垂直半径。第二组值也可以同时设置1到4个值,应用规则与第一组值相同

即 border-radius: <length> <length> <length> <length>/<length> <length> <length> <length>

看图比较清楚

border-radius : 10px 30px 50px / 10px 30px 50px;此时是长短半轴相等

border-radius : 50px/80px;

border-radius : 10px  30px 50px / 30px 50px 70px;

 
 
 
 

border-right-color:#fff;   border-radius:50%;   如果全是border,width和height为0

-------------------------------------box-shadow------------------------------------

css3学习--border的更多相关文章

  1. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  2. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  3. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  4. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

  5. css和css3学习

    css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...

  6. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  7. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  8. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  9. CSS3学习内容与心得

    今天2005年7月9号,博客这个东西还真不懂,以前吧我不认识它,它也不认识我.没辙,汤老要我们写,就写吧. 写什么好呢?那就写今天学习的css3的一些要点吧. css这门课程几乎都学完了.而我觉得我还 ...

随机推荐

  1. Why AlloyFinger is so much smaller than hammerjs?

    AlloyFinger is the mobile web gesture solution at present inside my company, major projects are in u ...

  2. 弹出层layer的使用

    弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...

  3. 一张“神图”看懂单机/集群/热备/磁盘阵列(RAID)

    单机部署(stand-alone):只有一个饮水机提供服务,服务只部署一份 集群部署(cluster):有多个饮水机同时提供服务,服务冗余部署,每个冗余的服务都对外提供服务,一个服务挂掉时依然可用 热 ...

  4. WWDC2016 观后杂感

    WWDC2016已经落幕了,我没有熬夜看看的录播. 总的来说觉得还是比较兴奋的,因为苹果将更多的APi开发出来了,可以玩出更多花样了.

  5. Mac下查看端口占用

    netstat命令 netstat -an | grep 端口号 lsof命令 lsof -i:端口号

  6. GsonFormat插件从配置到使用

    说明:目前多数服务器端都以json格式返回,那么相对应的解析时建立的实体类如果你还在自己挨个写的话,那就out了.新建一个类,选择Generate. ------------------------- ...

  7. Angular版本1.2.4在IE11的IE8模式下出错解决方案

    今天,群里一个兄弟抛出一个问题(如上),截图说明. 打断点调试下,貌似是console里面的log方法出错了,如下: 这个是console的log方法,为什么错呢,继续: 我们会发现,在这里是检测fu ...

  8. iOS加密方式及解压缩文件

    Base64加密方式 Base64是一种加密方法,可逆的加密. Base64中的可打印字符包括字母A-Z.a-z.数字0-9,这样共有62个字符./ + 填充 = echo -n BC|base64 ...

  9. yii2 RESTful api的详细使用

    作者:白狼 出处:http://www.manks.top/yii2-restful-api.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则 ...

  10. Long类型的数据转换时间格式方法

    function getDate(date) { //得到日期对象 var d=new Date(date); //得到年月日 var year =d.getFullYear(); ); var da ...