CSS-右下角的边框半径 | border-bottom-right-radius-低调大师

CSS-右下角的边框半径 | border-bottom-right-radius

2018-09-12 741

该border-bottom-right-radius属性设置元素右下角的舍入。

/* The corner is a circle */
/* border-bottom-right-radius: radius */
border-bottom-right-radius: 3px;

/* Percentage values */
border-bottom-right-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */
border-bottom-right-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */
border-bottom-right-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */

/*The corner is an ellipsis */
/* border-bottom-right-radius: horizontal vertical */
border-bottom-right-radius: 0.5em 1em;

border-bottom-right-radius: inherit;

舍入可以是圆或椭圆，或者如果其中一个值是0没有圆角，拐角处是正方形的。

背景(图像或颜色)在边框中被裁剪，甚至是圆形的；裁剪的确切位置由background-clip财产。

如果此属性的值未在border-radius属性之后应用于元素的速记属性。border-bottom-right-radius属性将此属性的值重置为初始值。速记性质...

Initial value	0
Applies to	all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter.
Inherited	no
Percentages	refer to the corresponding dimension of the border box
Media	visual
Computed value	two absolute <length>s or <percentage>s
Animation type	a length, percentage or calc();
Canonical order	the unique non-ambiguous order defined by the formal grammar

句法

只有一个价值：

值是<length>或者是<percentage>表示圆圈的半径，用于那个角落的边框。有两个值：

第一个值是<length>或者是<percentage>表示省略号的水平半长轴，用于该角的边框。

第二个值是<percentage>表示省略号的垂直半长轴，用于该角的边框。

值

<length-percentage>表示圆周半径的大小，或省略的半长和半短轴的大小。作为绝对长度，它可以用css允许的任何单位表示。<length>数据类型。水平轴的百分比指框的宽度，垂直轴的百分比指框的高度。负值无效。

形式语法

<length-percentage>{1,2}where 
<length-percentage> = <length> | <percentage>

实例

Live example	Code
.	An arc of circle is used as the border div { border-bottom-right-radius: 40px 40px; }
.	An arc of ellipse is used as the border div { border-bottom-right-radius: 40px 20px; }
.	The box is a square: an arc of circle is used as the border div { border-bottom-right-radius: 40%; }
.	The box is not a square: an arc of ellipse is used as the border div { border-bottom-right-radius: 40%; }
.	The background color is clipped at the border div { border-bottom-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; }

规范

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of 'border-bottom-right-radius' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic Support	4 1 -webkit-	(Yes) (Yes) -webkit-	41 49 -webkit- 2 1 — 12 (as -moz-border-radius-topright)	9	10.5	5 3 -webkit-
Percentages	4	(Yes)	4 13	9	10.5	5
Ellipitcal corners	1	(Yes)	3.5	9	10.5	3

Feature	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic Support	?	?	(Yes) (Yes) -webkit-	(Yes)1	?	?	?
Percentages	?	?	(Yes)	(Yes)	?	?	?
Ellipitcal corners	?	?	(Yes)	(Yes)	?	?	?

纠错

1. 在Firefox 50之前，圆角的边框样式总是呈现出border-style设置为solid的样式，这已在Firefox 50中修复。

2. 从Firefox 44到48，-webkit-前缀可用于layout.css.prefixes.webkit首选项。从Firefox 49开始，首选项默认为true。

3. 在Firefox 4之前，<percentage>即使为高度指定半径，也会与盒子的宽度相关。这意味着-moz-border-radius-topright总是绘制一个圆弧，而不是一个椭圆，后面是单个值。

另见

边界半径相关的CSS属性：CSS简写属性border-radius，各个顶角的属性：border-top-right-radius，border-bottom-right-radius，和border-top-left-radius。

微信关注我们

原文链接：https://yq.aliyun.com/articles/638977

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

CSS-左下角的边框半径 | border-bottom-left-radius

border-bottom-left-radiusCSS属性设置元素的左下角的圆。 /* the corner is a circle */ /* border-bottom-left-radius: radius */ border-bottom-left-radius: 3px; /* Percentage values */ border-bottom-left-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */ border-bottom-left-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */ border-bottom-left-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */ /* the corner is an elli...

2018-09-13

691

目录定义 IntentService为Service的子类，它能够进行耗时任务。原理 IntentService具有和Service一样的生命周期，同时提供了在后台线程中处理异步任务的机制，与HandlerThread类似，IntentService也是在一个后台线程中顺序执行所有任务，我们通过给Context.startService传递一个Intent类型的参数可以启动IntentService的异步执行，如果此时IntentService正在运行中，那么这个新的Intent将会进入队列进行排队，直到后台线程处理完队列前面的任务；如果此时IntentService没有在运行，那么将会启动一个新的IntentService，当后台线程队列中所有的任务处理完之后，IntentService将会结束它的生命周期，因此IntentService不需要开发者手动结束。实现 IntentService是一个抽象类因此我们需要继承IntentService并实现它的onHandleIntent方法，并在这个方法中实现后台处理的业务逻辑，同时在子类的构造方法中需要调用super(String...

2018-09-13

623

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。