Tagged

边框半径

A collection of 2 posts

边框半径

css3:border-radius圆角边框详解

前言 今天来聊聊这个 border-radius 属性,radius的英文意思是弧度的意思,而国人更喜欢称之为圆角,因为它可以使得我们的边框有棱有角。当年前辈们都是用图片君搞定圆角的年代或用一条条边框构造的年代已经一去不复返,而移动互联网的高速发展为 border-radius 属性的飞速发展,so今天就来聊聊圆角边框。虽然英文翻译过来叫做半径弧度,但是为了能让大家更加熟悉,下文统一使用圆角半径来代替。 相关介绍 这个 borde-radius 属性其实也是一个简写值,它分别是 border-top-left-radius(左上圆角半径), border-top-right-radius(右上圆角半径), border-bottom-right-radius (右下圆角半径),border-bottom-left-radius(左下圆角半径),如下图所示: 说到半径,我突然想起来了以前数学中学过关于圆跟半径的关系,百科如下: 在圆中,连接圆心和圆上任意一点的线段叫做圆的半径。通常用字母r来表示。 在球中,连接球心和球面上任意一点的线段叫做球的半径。 正多边形所在的外接圆的半径叫做圆内接正多边形的半径。 css中的radius多少也跟圆扯上关系,不过要分椭圆还是圆,因为css中分了垂直半径和水平半径。而几何中的圆只要确定了半径就可以画出一个圆出来。css中圆角,当使用一个值时,确定为圆角;当使用两个值时,确定一个椭圆圆角,但是不管是圆角还是椭圆角其实都有点像是背景和设置这个圆角半径的重叠产生的,浏览器会去除他们的没有交集的部分,留下有交集的部分,

css

CSS3系列教程:边框半径和圆角

页面中圆角的实现是个很头疼的问题,虽然现在有很多种实现方法,但是都是比较麻烦的。在本文中,让我们看看如何使用CSS3 border-radius来实现圆角DIV。 跨浏览器兼容性 就像在上一篇《CSS3系列教程:简介》中提到的,并不是所有的浏览器支持CSS3,但是那些比较好的浏览器选择兼容,而不是直接支持。我们有两个能使用的前缀。 前缀: -moz(例如 -moz-border-radius)用于Firefox -webkit(例如:-webkit-border-radius)用于Safari和Chrome。 CSS3圆角(所有的) 不使用图片来实现圆角曾经是很流行的能力,创建那些完美的小圆角图片,用做适当的CSS背景,是非常费时的工作。现在,使用CSS3,我们可以用几行代码来创建圆角。 这是一个5px普通边框和15px边框半径的设置: #roundCorderC{ font-family: Arial; border: 5px solid #dedede; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; padding: 15px 25px;