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

前言

 当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:向内凹的圆角

总结

 尊重原创,转载请注明

感谢

《The Humble Border-Radius》

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏james大数据架构

原生JS编写的照片墙效果实例演示特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...

24710
来自专栏Golang语言社区

JS游戏开发 可移动地图的实现

一、前言 这一讲的内容很简单,大家理解起来会更快。因此我只对重点加以分析,其他的就轮到大家思考哦!首先来说,我对游戏开发可以算是不怎么深入,因为现在的程序员爱用...

5286
来自专栏前端说吧

mask遮罩层的华丽写法

1882
来自专栏黑泽君的专栏

事件监听机制的通俗解释

1561
来自专栏MixLab科技+设计实验室

设计师会编程、程序员懂艺术之设计规范

以下为正文 UI&UX类的设计规范,不像建筑设计、工业设计那样,有比较成熟权威的设计规范。大多是各家发布的设计规范,用于自家产品、品牌的设计复用。 本文从 设计...

4266
来自专栏coding for love

CSS入门7-三大特性之继承特性

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1042
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法

1453
来自专栏星回的实验室

CSS闭合浮动

一眼望上去,满屏的float,页面内容一多了那就是天塌地陷啊。于是按照多年以前实习学会的闭合浮动

1042
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow

用过Arcgis Server for JavaScript API肯定知道InfoWIndow,你在用InfoWindow的时候会发现各种问题,例如不能完全显...

1592
来自专栏jojo的技术小屋

原 HTML5 video视频的plays

作者:汪娇娇 时间:2017年1月17日 问题其实很简单,就是h5的video视频如何在iPhone上不全屏显示,并且自动播放。 测过就知道,只要在video上...

3358

扫码关注云+社区

领取腾讯云代金券