border-radius@3圆角边框
属性描述： 设置或获取对象使用圆角边框，复合属性
语法模板：
border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
默认值： 根据每个独立属性设置
属性值描述：
<length>：用长度值设置对象的圆角半径长度，不允许负值;
<percentage>：用百分比设置对象的圆角半径长度，不允许负值;
适用元素： 所有元素
是否具有继承性： 否
是否具有动画性： 根据每个独立属性设置
脚本接口： borderRadius
注意事项： 提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数：
- 水平半径：如果提供全部四个参数值，将按上左
top-left、上右top-right、下右bottom-right、下左bottom-left的顺序作用于四个角 - 如果只提供一个，将用于全部的于四个角
- 如果提供两个，第一个用于上左
top-left、下右bottom-right，第二个用于上右top-right、下左bottom-left - 如果提供三个，第一个用于上左
top-left，第二个用于上右top-right、下左bottom-left，第三个用于下右bottom-right - 垂直半径也遵循以上
4点
border-top-left-radius@3
属性描述： 设置或获取对象的左上角圆角边框
语法模板：
border-top-left-radius：[ <length> | <percentage> ]{1,2}
默认值： 0
属性值描述：
<length>：用长度值设置对象的左上角(top-left)圆角半径长度，不允许负值;
<percentage>：用百分比设置对象的左上角(top-left)圆角半径长度，不允许负值;
适用元素： 所有元素
是否具有继承性： 否
是否具有动画性： 是
**脚本接口： ** borderTopLeftRadius
注意事项： 提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
border-top-right-radius，border-bottom-right-radius，border-bottom-left-radius属性与border-top-left-radius属性特性相同，此处不再熬述
box-shadow@3对象阴影
属性描述： 设置或获取对象阴影
语法模板：
box-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = inset? && <length>{2,4} && <color>?
默认值： none
属性值描述：
none：无阴影;
<length>①：第1个长度值用来设置对象的阴影水平偏移值，可以为负值;
<length>②：第2个长度值用来设置对象的阴影垂直偏移值，可以为负值;
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值，不允许负值;
<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值，可以为负值;
<color>：设置对象的阴影的颜色;
inset：设置对象的阴影类型为内阴影，该值为空时，则对象的阴影类型为外阴影;
适用元素： 所有元素
是否具有继承性： 否
是否具有动画性： 是，除了内、外阴影切换时
脚本接口： boxShadow
注意事项： 可以设定多组效果，每组参数值以逗号分隔
border-image@3图像边框
属性描述： 设置或获取对象的边框样式使用图像来填充，复合属性
语法模板：
border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>
默认值： 根据每个独立属性设置
属性值描述：
/***css3中添加的新属性***/
适用元素： 根据每个独立属性设置
是否具有继承性： 无
是否具有动画性： 根据每个独立属性设置
脚本接口： borderImage
注意事项： 使用图像替代<border-style>去定义边框样式。当 <border-image> 为none或图像不可见时，将会显示 <border-style> 所定义的边框样式效果
border-image-source
属性描述： 设置或获取对象的边框样式使用图像路径
语法模板：
border-image-source：none | <image>
默认值： none
属性值描述：
none：无背景图片;
<image>：使用绝对或相对地址指或者创建渐变色来确定图像;
适用元素： 所有元素，除table元素设置了 <border-collapse> 为collapse之外
是否具有继承性： 否
是否具有动画性： 否
脚本接口： borderImageSource
border-image-slice@3
属性描述： 设置或获取对象的边框背景图的分割方式
语法模板：
border-image-slice：[ <number> | <percentage> ]{1,4} && fill?
默认值： 100%
属性值描述：
/***css3中添加的新属性***/
适用元素： 所有元素，除table元素设置了 <border-collapse> 为collapse之外
是否具有继承性： 否
是否具有动画性： 否
脚本接口： borderImageSlice
注意事项： 该属性指定从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill
border-image-width@3
属性描述： 设置或获取对象的边框厚度
语法模板：
border-image-width：[ <length> | <percentage> | <number> | auto ]{1,4}
默认值： 1
属性值描述：
<length>：用长度值指定宽度，不允许负值;
<percentage>：用百分比指定宽度，参照其包含块进行计算，不允许负值;
<number>：用浮点数指定宽度，不允许负值;
auto：如果auto值被设置，则 <border-image-width> 采用与 <border-image-slice> 相同的值;
适用元素： 所有元素，除table元素设置了 <border-collapse> 为collapse之外
是否具有继承性： 否
是否具有动画性： 否
脚本接口： borderImageWidth
注意事项： 该属性用于指定使用多厚的边框来承载被裁剪后的图像，该属性可省略，由外部的 <border-width> 来定义
border-image-outset@3
属性描述： 设置或获取对象的边框背景图的扩展
语法模板：
border-image-outset：[ <length> | <number> ]{1,4}
默认值： 0
属性值描述：
<length>：用长度值指定宽度，不允许负值;
<number>：用浮点数指定宽度，不允许负值;
适用元素： 所有元素，除table元素设置了 <border-collapse> 为collapse之外
是否具有继承性： 否
是否具有动画性： 否
脚本接口： borderImageOutSet
注意事项： 该属性用于指定边框图像向外扩展所定义的数值，即如果值为10px，则图像在原本的基础上往外延展10px再显示
border-image-repeat@3
属性描述： 设置或获取对象的边框图像的平铺方式
语法模板：
border-image-repeat：[ stretch | repeat | round | space ]{1,2}
默认值： stretch
属性值描述：
stretch：指定用拉伸方式来填充边框背景图;
repeat：指定用平铺方式来填充边框背景图，当图片碰到边界时，如果超过则被截断;
round：指定用平铺方式来填充边框背景图，图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框;
space：指定用平铺方式来填充边框背景图，图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框;
适用元素： 所有元素，除table元素设置了 <border-collapse> 为collapse之外
是否具有继承性： 否
是否具有动画性： 否
脚本接口： borderImageRepeat
注意事项： 该属性用于指定边框背景图的填充方式。可定义0-2个参数值，即水平和垂直方向。如果2个值相同，可合并成1个，表示水平和垂直方向都用相同的方式填充边框背景图；如果2个值都为stretch，则可省略不写
outline轮廓线
属性描述： 设置或获取对象轮廓线的特性，
**默认值：**不显示
**总体描述：**大部分内容与border相同
特殊属性值：
outline-offset: [length]px;
轮廓线的偏移量，正值向外偏移，否则向元素内部偏移
caret-color 光标的颜色
outline：<outline-width> || <outline-style> || <outline-color>
<outline-width>：指定轮廓边框的宽度;
<outline-style>：指定轮廓边框的样式;
<outline-color>：指定轮廓边框的颜色;
**使用场景：**input文本框闪烁的边框可以采用轮廓线
注意：
- 轮廓线又称装饰线，不占据空间，所以有重叠情况，若想要不重叠，可以设置margin值
- outlines`相关属性不占据布局空间，不会影响元素的尺寸，但同时也会造成层叠现象
outlines可能是非矩形- 不允许类似
<border>属性那样能将自身拆分为<border-top>,<border-right>,<border-bottom>,<border-left> - outline属性可以扩展为outline-width，outline-style，outline-color属性，其特性与border相近，此处不再熬述。
附加例题：三角形
- 代码
<head>
<style>
div{
width: 0px;
height: 0px;
border-style: solid;
border-width: 40px;
border-color: black yellow transparent rgba(0, 0, 0, 0);
}
</style>
</head>
<body>
<div></div>
</body>
-
解决方法
加粗边框，内容尺寸设置为0，这样就不存在内容，边框会占据整个容器，再只保留任意一边或两边边框就可以展示出一个三角形（上面有解说相邻边距的斜角问题）
outline-offset@3
属性描述： 设置或获取对象外的线条轮廓偏移容器的值
语法模板：
outline-offset：<length>
默认值： 0
属性值描述：
/***css3中添加的新属性***/
适用元素： 所有元素
是否具有继承性： 否
是否具有动画性： 是，当取值为<length>时
脚本接口： outlineOffset
注意事项： outline-offset是以border边界作为参考点的，从0开始，正值从border边界往外延，负值从border边界往里缩
## box-sizing@3
属性描述： 设置或获取
语法模板：
box-sizing：content-box | border-box
默认值： content-box
属性值描述：
content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )此属性表现为标准模式下的盒模型;
border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )此属性表现为怪异模式下的盒模型;
适用元素： 所有接受 <width> 和 <height> 的元素
是否具有继承性： 否
是否具有动画性： 否
脚本接口： boxSizing
扫一扫
717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
