前言

 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时,实际值会按比例分配元素宽度时,不禁会问"我真的懂border吗?"。本系列将稍微深入探讨一下那个貌似没什么好玩的border!

《CSS魔法堂:重拾Border之——解构Border》

《CSS魔法堂:重拾Border之——图片作边框》

《CSS魔法堂:重拾Border之——不仅仅是圆角》

《CSS魔法堂:重拾Border之——更广阔的遐想》

当Border-Radius遇上Mr. X

 也许大家会觉得通过滑动门已经能实现尺寸有限下的容器圆角效果,而CSS3中的Border-Image更能完美实现容器尺寸无下限的圆角效果,那为什么还要引入Border-Radius呢?代理十分简单啦,无论是滑动门还是Border-Image技术,它们均以图片作为圆角的基础,而Border-Radius则是通过数学中的几何图形来画圆角。也就是说我们操作的几何公式中的未知变量,而具体的画图操作则由渲染引擎处理,而不是我们苦苦哀求设计师帮忙。因此通过Border-Radius再结合其他与未知变量相关的属性,变化可真是无穷无尽哦!

当Border-Radius遇上border-style

<style type="text/css">
.target{
width: 0;
height: 0;
border: 60px double #F00;
border-radius: 50%;
}
</style>
<div class="target"></div>

当Border-Radius遇上Transition

更多变化的角byborder-corner-shape

border-corner-shape作为即将引入的特性,为我们提供更多形状的角的可能。具体可参考border-corner-shape

border-corner-shape: curve | bevel | notch | scoop

curve:默认值,圆角

bevel:切角,其实就是沿与相交线的垂直线切割掉直角

notch:凹槽

scoop:向内凹的圆角

总结

 尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/5465268.html_肥仔John

感谢

《The Humble Border-Radius》

CSS魔法堂:重拾Border之——更广阔的遐想的更多相关文章

  1. CSS魔法堂:重拾Border之——不仅仅是圆角

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  2. CSS魔法堂:重拾Border之——图片作边框

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  3. CSS魔法堂:重拾Border之——解构Border

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  4. CSS魔法堂:Box-Shadow没那么简单啦:)

    前言  说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事. 二话不说看效果 3D小球 <style typ ...

  5. CSS魔法堂:display:none与visibility:hidden的恩怨情仇

    前言  还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而visibilit ...

  6. CSS魔法堂:小结一下Box Model与Positioning Scheme

    前言  对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考.  <CSS魔法堂:重新认识Box Model.IFC.B ...

  7. CSS魔法堂:说说Float那个被埋没的志向

    前言  定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...

  8. CSS魔法堂:你一定误解过的Normal flow

    前言  刚接触CSS时经常听到看到一个词"文档流",那到底什么是"文档流"呢?然后会看到"绝对定位和浮动定位能脱离文档流",从这句可以看到文 ...

  9. CSS魔法堂:你真的懂text-align吗?

    前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The ...

随机推荐

  1. Git 常用命令大全

    Git常用操作命令: 1) 远程仓库相关命令 检出仓库:$ git clone git://github.com/jquery/jquery.git 查看远程仓库:$ git remote -v 添加 ...

  2. IOS网络第七天WebView-03js中调用webView中的代码

    *********** #import "HMViewController.h" @interface HMViewController () <UIWebViewDeleg ...

  3. Call for Papers IEEE/ACM International Conference on Advances in Social Network Analysis and Mining (ASONAM)

    IEEE/ACM International Conference on Advances in Social Network Analysis and Mining (ASONAM) 2014 In ...

  4. 移动Web触控事件总结

    移动web风风火火几多年,让我这个在Pc端漂流的前端er不免心生仰慕,的确入行几多年,也该是时候进军移动web了.移动web中踩到的第一个坑就是事件问题,所以在吸取众大神的经验后,特作总结以示后来者. ...

  5. Spring Rabbitmq HelloWorld实例

    之前的博客和大家分享了Rabbitmq的基本框架,及其工作原理,网址为 < http://www.cnblogs.com/jun-ma/p/4840869.html >.今天呢,想和大家一 ...

  6. 【Android环境搭建】解决安装使用SDK Manager更新时的问题

    问题描述: 安装使用SDK Manager更新时出现问题 Failed to fetch URL  https://dl-ssl.google.com/android/repository/repos ...

  7. 测试框架Mocha与断言expect

    测试框架Mocha与断言expect在浏览器和Node环境都可以使用除了Mocha以外,类似的测试框架还有Jasmine.Karma.Tape等,也很值得学习. 整个项目源代码: 为什么学习测试代码? ...

  8. jquery-懒加载插件

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪, 系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 从此可知,再好的网站,再炫的网站, ...

  9. Nginx配置文件nginx.conf详解

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  10. C#设计模式系列:简单工厂模式(Simple Factory)

    1. 简单工厂模式简介 1.1 定义 简单工厂模式定义一个Factory类,可以根据参数的不同返回不同类的实例,被创建的实例通常有共同的父类. 简单工厂模式只需要一个Factory类. 简单工厂模式又 ...