1. border-radius
标准的border-radius
border-*-radius可以写为一个值和两个值,当一个值的时候表示圆角的宽高;两个值的时候,第一个值表示水平宽度,第二个值表示垂直高度。
原文:The two length or percentage values of the ‘border-*-radius’ properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge (see the diagram below). The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box. Negative values are not allowed.(来源:http://www.w3.org/TR/css3-background/#the-border-radius)
border-radius: 5px;
等价于
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-radius: 5px 25px;
等价于
border-top-left-radius: 5px;
border-top-right-radius: 25px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 25px;
border-radius: 25px 5px 50px / 15px 30px;
等价于
border-top-left-radius: 25px 15px;
border-top-right-radius: 5px 30px;
border-bottom-right-radius: 50px 15px;
border-bottom-left-radius: 50px 30px;
-webkit-border-radius
-webkit-border-radius有一个值的时候和border-radius时一样,-webkit-border-radius有两个值时和border-radius不同,三个值和四个值时二者一样。
-webkit-border-radius: 15px 20px;
等价于
border-top-left-radius: 15px 20px;
border-top-right-radius: 15px 20px;
border-bottom-right-radius: 15px 20px;
border-bottom-left-radius: 15px 20px;
分享到:
相关推荐
在CSS3中,弹性布局(Flexbox)是一种强大的布局模式,允许开发者更加灵活地控制元素在容器中的排列、对齐和大小调整。在早期的浏览器实现中,WebKit浏览器(如Safari和Chrome)引入了一个实验性的前缀 `-webkit-box...
本文将详细探讨如何实现CSS3圆角在火狐(Firefox)、Internet Explorer(IE)以及基于WebKit内核的浏览器(如Chrome和Safari)中的兼容性。 1. **火狐浏览器(Firefox)兼容性** 火狐从Firefox 3.6版本开始支持CSS...
标题中的“谷歌和Safari WebKit独有CSS Hack”指的是在开发Web页面时,为了针对谷歌浏览器(Chrome)和基于WebKit内核的Safari浏览器进行特定样式调整而使用的CSS技巧。这些技巧通常是为了修复浏览器之间的兼容性...
`-webkit-transform` 是一个非标准的CSS属性,但在Webkit内核的浏览器(如Chrome和Safari)中广泛支持。它允许对元素进行2D和3D转换,如旋转、缩放、平移和倾斜。在这个场景中,我们可以利用此属性来改变进度条的...
它支持最新的Web标准,如HTML5、CSS3和SVG,使得iPhone上的网页展示效果与桌面浏览器接近。 **JavaScriptCore:JavaScript执行引擎** JavaScriptCore是WebKit中的JavaScript引擎,最初也来自KDE项目。在iPhone上,...
在这个例子中,`-webkit-border-radius`、`-moz-border-radius`和`border-radius`分别用于Chrome/Safari/Opera、Firefox和其他现代浏览器,而`behavior: url(/path/to/iecss3.htc)`则是针对IE的解决方案。...
例如,IE9不支持CSS3的transform、transition和animation等特效,这些在其他浏览器中已经成为标准。 为了解决这个问题,我们可以使用一个名为“Modernizr”的JavaScript库。Modernizr是一种开源工具,它可以检测...
虽然大多数现代浏览器都支持CSS3特性,但为了确保在较旧或者非主流浏览器中的正常显示,我们需要使用前缀(如-webkit-、-moz-、-ms-等)或者采用渐进增强的策略。 在实际应用中,我们可以使用在线工具或模板生成CSS...
标题中的“WebKit中可用的CSS高级特性”指的是在基于WebKit渲染引擎的浏览器,如...然而,随着CSS规范的发展和浏览器的更新,许多WebKit专有的特性已经或正在被更广泛的CSS3标准所采纳,减少了对特定浏览器前缀的依赖。
### Webkit内核浏览器默认CSS属性详解 #### 引言 在前端开发中,了解不同浏览器内核的默认样式设置对于实现跨浏览器兼容性至关重要。WebKit作为一款流行的浏览器引擎,被广泛应用于Safari、Google Chrome等浏览器...
CSS3是CSS(级联样式表)的第三个主要版本,它引入了一系列新的特性和功能,极大地扩展了网页设计的可能性。以下是对标题和描述中提到的CSS3新技术的详细解释: 1. **圆角**:在CSS3之前,创建带有圆角的元素通常...
本资源“css标准布局源文件”提供了实现标准CSS布局设计的素材和代码,对于学习和提升CSS布局技巧非常有帮助。 1. **盒模型理解**:在CSS中,每个元素都被视为一个矩形的盒子,包括内容区域、内边距(padding)、...
本资源摘要信息主要介绍CSS3的新特性,包括CSS3的介绍、CSS3选择器、CSS3文本、CSS3边框、CSS3背景、CSS3颜色、CSS3渐变、CSS3盒模型等。 CSS3介绍 CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,...
例如,`-webkit-perspective`和`-moz-perspective`是针对Webkit(如Chrome和Safari)和Firefox的非标准版本。 在实际应用中,3D透视效果常用于制作3D旋转木马、卡片翻转、3D导航菜单等。通过结合其他CSS3属性,如...
WebKit 是由KHTML和Gekko演变而来的,它实现了W3C的开放网络标准,如HTML5、CSS3和SVG。WebKit的核心组件包括HTML解析器、CSS样式引擎、JavaScriptCore(JavaScript引擎)和WebCore(负责布局和渲染)。WebKit的...
WebKit的Box模型扩展了标准的CSS Box模型,允许开发者更灵活地控制元素的边框、内边距和外边距。例如,`-webkit-border-radius`属性可以创建圆角效果,`-webkit-box-sizing`定义了元素的内容区域如何计算尺寸,可...
在CSS3中,一些新特性在初期阶段为了防止标准未定而引入了各个浏览器厂商的私有前缀,如 `-webkit-` (Chrome, Safari), `-moz-` (Firefox), `-ms-` (Internet Explorer), 和 `-o-` (Opera)。手动添加这些前缀非常...
CSS3是CSS2的升级版本,版本号中的“3”代表着它相较于之前的版本有着显著的进步和发展。CSS3增加了许多强大的新功能,极大地提高了网页设计的灵活性和创意空间。目前主流浏览器如Chrome、Safari、Firefox、Opera...