css3设置圆角属性名,div圆角属性
border-radius属性是什么？
borderradius是CSS3设置圆角的一个属性，其属性值得单位可以使用：em、px、百分比等等。设置原则：一个值，则用其为半径构建圆形，这个圆与边框的交集形成圆角效果。两个值，则用两个值分别为半长轴、半短轴构建椭圆，这个圆与边框的交集形成圆角效果。
圆角是用一段与角的两边相切的圆弧替换原来的角，圆角的大小用圆弧的半径表示。在网页设计越来越精美的今天，圆角的应用已经越来越广泛。borderradius的用途：为边框设置圆角，若无边框，则会作用到背景上。
圆是一种几何图形。根据定义，通常用圆规来画圆。同圆内圆的直径、半径长度永远相同，圆有无数条半径和无数条直径。当多边形的边数越多时，其形状、周长、面积就都越接近于圆。所以，世界上没有真正的圆，圆实际上只是概念性的图形。
怎样用css写出圆形边框
1、首先打开sublime?text编辑器，新建一个html文件，里面写入一个p标签：
2、然后设置p标签的样式，这里先设置一个边框，然后设置圆角边框，主要使用CSS3属性border-radius属性定义圆角效果。其中的数值为参数length是浮点数和单位标识符组成的长度值，不可为负值，这里圆角的值越大，圆角的弧度也越大：
3、最后打开浏览器，就可以看到圆角边框了：
CSS3边框与圆角
属性：一个最多可指定四个border-*-radius属性的 符合属性 ，这个属性允许你为元素添加圆角边框！
语法：border-radius:1-4 length|% / 1-4length|%
【length可为任意长度单位，比如px、em。
当使用%的时候，相对的不是字体的大小而是对应边的长度的百分比，例如border-top-left-radius:50%，那么左上角的圆角在左边的弧度是边框左边长度的50%、在上边的弧度是边框上边长度的50%；
因此如果设置border-radius:50%，那么边框将会变为一个椭圆】
兼容性：IE9+、Firefox4+，Chrome，Safari5+，Opera
-------------------------------------------------
CSS3指定每个圆角：
多值：
border-radius（四个值）:左上角 右上角 右下角 左下角
border-radius（三个值）:左上角 右上角和左下角 右下角
border-radius（两个值）:左上角和右下角 右上角和左下角
border-radius（一个值）:四个圆角值相同
border-top-left-radius:定义了左上角的弧度
border-top-right-radius:定义了右上角的弧度
border-bottom-left-radius:定义了右下角的弧度
border-bottom-right-radius:定义了左下角的弧度
box-shadow属性：可以设置一个或多个下拉阴影的框
语法：
box-shadow：h-shadow（水平位置偏移量）允许负值。必写；
v-shadow（处置位置偏移量）允许负值。必写；
blur（模糊距离）可选；
spread（阴影尺寸）可选；
color（阴影颜色）可选；
inset（内部阴影）可选；扩展属性，正值缩小，负值增大
box-shadow: 10px（横向，正值往右，负值往左） 10px（纵向，正值往下，负值网上） 10px（模糊，从边框到内容，完成渐变模糊） 10px（扩展，四周边界往外扩展10px） yellow（阴影颜色）
border-image
属性：使用border-image-*属性来构建美丽的可扩展按钮
语法：border-image:source slice width outset repeat；
兼容性：IE不兼容、Firefox、Chrome、Safari6+、Opera不兼容
-------------------------------------------------
border-image-source属性
border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式
语法
border-image-source：none；
border-image-source：url("...")；
-------------------------------------------------
border-image-slice属性
border-image-slice属性指定图像的边界向内偏移
语法
border-image-slice：number|%|fill；
-------------------------------------------------
border-image-width属性
brder-image-width属性指定图像边界的宽度
语法
border-image-width：number|%|auto；
-------------------------------------------------
border-image-outset属性
border-image-outset用于指定在边框外部绘制border-image-area的量
语法
border-image-outset：length|number；
-------------------------------------------------
border-image-repeat属性
该属性用于图像边界是否重复（repeated）、拉伸（stretched）或铺满（rounded）
语法：border-image-repeat：stretch|repeat|round|initial|inherit；
CSS3 利用“box-shadow”属性结合“outline”制作“边框内圆角”
box-shadow：给元素块添加周边阴影效果。
语法：box-shadow: h-shadow v-shadow blur spread color inset;
*还有另一种情况： box-shadow: 0 2px 2px #FECC84
当我们在色值前只写了三个数值的情况下，则第三个值是 blur （模糊距离）。
利用阴影属性，也可以实现外边框的效果：
当我们再为它添加一个 outline （轮廓），就会发现它实现了-边框内圆角：
* 关于为什么会这样：
outline的描边并不会跟着圆角走，因此显示为直角。
所以把这两者叠加到一起，box-shadow 则刚好填补描边与容器圆角之间的空隙。
*值得注意的是，box-shadow 阴影的大小值并不一定等于描边的宽度，它和圆角的大小有关系。所以只需要一个足够填补空隙的大小就可以了。事实上，制定一个等于描边宽度的值在某些浏览器中可能会渲染异常，所以，最好是稍小的值。
参考书籍： Lea Verou 《CSS揭秘》
web前端开发，怎么处理css3中边框倒角属性
CSS3 使用border-radius属性设置圆角效果
该属性可以通过设置图片或块级元素四个角的圆角半径像素数来实现该效果。W3C规定该属性的可能取值为：
none，默认值，表示元素没有圆角效果
length，由浮点数字和单位标识组成的长度值
%，由百分比设置的圆角值
该属性可以分别设置元素的四个圆角效果，采用下列格式来实现。
格式：border-radius: 左上角 右上角 右下角 左下角;
通常，四个方向的角半径均采用length取值来实现，该取值必须为浮点数字和单位标识共同组成。同时规定，该取值不得取负数。
例1：利用整数来实现圆角取值。
div{
width: 200px; height: 150px;
border: solid 1px #aaaaaa;
border-radius: 10px 5px 10px 5px;
background-color: #ff5857;
}
上述实例设置了一个div块级元素，其宽度为200px，高度为150px。为了能够看到其圆角效果，增加了颜色为#ff5857的背景颜色，并且添加了1px大小的边框，其边框为实线，边框颜色为#aaaaaa。最后设置其圆角效果，左上角和右下角均为10px，右上角和左下角均为5px。
例2：查看下列CSS代码。
（1）border-radius: 10px 5px 15px 20px;
（2）border-radius: 10px 5px 15px;
（3）border-radius: 10px 5px;
（4）border-radius: 10px;
上述四组代码中，只有组（1）提供了完全符合格式的四个数据，其他三组均只提供了小于四个的数据。这种情况下，数据依然按照“左上角 右上角 右下角 左下角”的顺序进行排列，没有涉及到的角方向按照其对角的圆角数据进行设置。
因此，组（2）的数据表示：左上角为10px，右上角为5px，右下角为15像素，左下角为右上角的像素设置，即5px。请同学们根据这样的方法，理解一下组（3）的圆角含义。
组（4）就设置了一个数据，这表示四个方向的角半径均为10px。
二、独立设置元素的四个圆角效果：
若只想设置一个块级元素右上角的圆角效果，该如何实现呢？这里W3C为border-radius属性派生出了表示四个方向的独立圆角效果的子属性。
border-top-left-radius, 定义左上角的圆角效果
border-top-right-radius, 定义右上角的圆角效果
border-bottom-right-radius, 定义右下角的圆角效果
border-bottom-left-radius, 定义左下角的圆角效果
上述四个子属性的取值规则和border-radius属性的取值规则是完全相同的。
例3：设置p标记的圆角效果，其中左下角没有圆角效果，其他三个方向角的圆角效果均为25px。
方法1：利用border-radius属性统一设置。
p{border-radius: 25px 25px 25px 0;}
方法2：利用border-radius属性的派生子属性设置。
p{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
方法3：利用border-radius属性设置所有角方向均为25px，再利用border-radius属性的派生子属性设置左下角没有圆角效果。
p{
border-radius: 25px;
border-bottom-left-radius: none;
}
各位高手好！一个关于css3圆角的问题？
改成：div.style.borderRadius，从网上抄来的，我没试是否有效。
没有中划线的css属性一般直接使用 style.属性名 即可。如：obj.style.width，obj.style.position 等。
对于含有中划线的css属性，将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。
如：obj.style.marginTop，obj.style.borderLeftWidth，obj.style.zIndex，obj.style.fontFamily等。
另外在css中有一个特殊的属性其js使用方法比较特殊。这个特殊的属性就是:float。我们不能直接使用obj.style.float来使用，这样操作是无效的。其正确的使用方法是为：IE:obj.style.styleFloat，其他浏览器:obj.style.cssFloat。
上面不行的话你还可以这样：
1、先定义一个CSS规则，然后 xxx.className="";
2、 xxx.style.cssText="border:1
solid #0B2565;background:red;border-radius:5px;"