CSS盒模型高级使用规范.docVIP

Border !DOCTYPE html html lang=zh-cn head meta charset=utf-8 / titleborder/title !-- 描述： 复合属性。设置对象边框的特性。 如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。 取值： [ border-width ]： 设置或检索对象边框宽度。 [ border-style ]： 设置或检索对象边框样式。 [ border-color ]： 设置或检索对象边框颜色。 -- style body{ background-color: deepskyblue; } .test { border: 20px solid black; } .test2 { margin-top: 10px; border: 5px solid; color: #f00; } /style /head body div class=test定义边框特性/div div class=test2边框颜色默认使用文本颜色/div /body /html!DOCTYPE html html lang=zh-cn head meta charset=utf-8 / titleborder-bottom-left-radius/title !-- 描述： 设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数 如设置border-bottom-left-radius:5px 10px;表示bottom-left这个角的水平圆角半径为5px，垂直圆角半径为10px。 语法： border-bottom-left-radius：[ length | percentage ] [ length | percentage ]? 默认值：0 取值： length： 用长度值设置对象的左下角(bottom-left)圆角半径长度。不允许负值 percentage： 用百分比设置对象的左下角(bottom-left)圆角半径长度。不允许负值 说明： -- style body{ background-color: deepskyblue; } ul { margin: 0; padding: 0; } li { list-style: none; margin: 10px 0 0 0; padding: 10px; background: #bbb; } .test .one { border-bottom-left-radius: 30px; } .test .two { border-bottom-left-radius: 10px 30px; } /style /head body ul class=test li class=one水平与垂直半径相同时br /border-bottom-left-radius:30px;/li li class=two水平与垂直半径不同时br /border-bottom-left-radius:10px 30px;/li /ul /body /html 3 右下角园边框 !DOCTYPE html html lang=zh-cn head meta charset=utf-8 / titleborder-bottom-right-radius/title !-- 描述： 设置或检索对象的右下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数 如设置border-bottom-right-radius:5px 10px;表示bottom-right这个角的水平圆角半径为5px，垂直圆角半径为10px。 语法： borde