CSS形状之border-radius

ckllj 发布于2019-08-29 12:20 / 3023人阅读

摘要：现将四个角指定为不同弯曲程度，结果如下其中可以写成以下形式此为新增的属性。相当于前面是水平弯曲长度，后面为竖直弯曲长度。其中是指弯曲的长度为矩形长度的等同于实例半圆形沿纵轴劈开的半椭圆四分之一椭圆技巧二形状

开发者常用border-radius来将矩形更改为圆角矩形，大部分人写上例如border-radius:5px;就可以满足对网页布局形状的要求，但其实这个CSS属性可以这么玩。

border-radius的三种声明方式

border-radius: 10px;
border-radius: 2em;
border-radius: 50%;

border-radius指定不同弯曲程度下的显示结果

现设置四个width: 200px;height: 100px;的正方形div，弯曲程度分别设置如下：

border-radius: 10%;
border-radius: 25%;
border-radius: 40%;
border-radius: 50%;

当设置四个width: 200px;height: 100px;的正方形div，弯曲程度分别设置如下：

border-radius: 10%;
border-radius: 25%;
border-radius: 40%;
border-radius: 50%;

显示结果为：

border-radius分别指定各个角弯曲程度

当声明border-radius: 10px;时，相当于声明border-radius: 10px 10px 10px 10px;。
四个角的值分别为左上-右上-右下-左下顺时针旋转，类似于指定盒模型的margin,border,padding方式。
现将四个角指定为不同弯曲程度，结果如下：

border-radius: 10% 25% 40% 50%;

其中border-radius: 10% 25% 40% 50%;可以写成以下形式:

border-top-left-radius: 10%;
border-top-right-radius: 25%;
border-bottom-right-radius: 40%;
border-bottom-left-radius: 50%;

此为css3新增的属性。

为border-radius分别指定水平、竖直弯曲程度

如上图所示，border-radius每个角度的弯曲程度都包括水平弯曲长度和竖直弯曲长度。
border-radius：50%；相当于border-radius: 50%/50%;前面是水平弯曲长度，后面为竖直弯曲长度。其中50%是指弯曲的长度为矩形长度的50%

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;

实例

半圆形

border-radius: 50% / 100% 100% 0 0;

沿纵轴劈开的半椭圆

border-radius: 100% 0 0 100% / 50%;

四分之一椭圆

border-radius: 100% 0 0 0;

CSS技巧（二）：形状

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111822.html

从一滴水说起，谈谈CSS形状的生成思路

摘要：水是生命之源生产之要生态之基。兴水利除水害事关人类生存社会进步历来是治国安邦的大事。附个生成器，虽然不能生成本文的水滴。水是生命之源、生产之要、生态之基。兴水利、除水害,事关人类生存、社会进步,历来是治国安邦的大事。巴拉巴拉~不扯淡了，来看看下面这张图，额，为了扣题，就管她叫水滴吧（虽然是倒的），从这开始，让我们用css来生成她~ showImg(https://segmentfa...

gotham 2019-08-29 11:04 评论0 收藏0
css揭秘笔记——形状

摘要：把改成，就变成了这样实现边框内圆角多重边框还有下实现多重背景为某一层背景单独设置类似这样的属性等等。裁切路径方案这种方案，当内边距不够宽时，会裁切掉文本。自适应的椭圆（border-radius的用法）单独指定水平和垂直半径长宽固定的元素，可以通过指定宽高的一半，变为椭圆形，格式为两个值用/分开。 width: 100px; height: 80px; border-radi...

dantezhao 2019-08-29 13:47 评论0 收藏0
【css3学习系列】之box-shadow,radial-gradient,linear-gradi

摘要：不在指定渐变区域的，以距离其最近的颜色填充。设置渐变为从右到左。这是默认值，等同于留空不写。最后奉上一碗纯拉面。 Talk is cheap.Show me the code. 1.box-shadow showImg(https://segmentfault.com/img/bVypxt); .chopsticks{ position: absolute; ...

LdhAndroid 2019-08-30 15:45 评论0 收藏0
不可思议的CSS之clip-path

摘要：一个用来生成各种形状包括随意拖拉自定义并且可以直接生成代码的网站。兼容性目前兼容性较差，和直接不支持，考虑兼容性的同学可以暂时等等。透明区域表示被裁剪的区域基本图形定义一个矩形。语法说明可选，表示填充规则用来确定该多边形的内部。本文首发于我的博客曾经和某位朋友在聊天中讨论过这样一个话题：综合90%的网站的布局以及页面中的元素不是方的，就是圆的。就像所有的颜色都是由三原色（RGB）...

walterrwu 2019-08-29 13:17 评论0 收藏0
CSS魔法堂：重拾Border之——更广阔的遐想

摘要：也就是说我们操作的几何公式中的未知变量，而具体的画图操作则由渲染引擎处理，而不是我们苦苦哀求设计师帮忙。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时，实际值会按比...

lily_wang 2019-08-30 13:01 评论0 收藏0