CSS3-使用边框和背景
<!-- 使用边框样式 --> <!-- border-width 设置边框宽度 --> <!-- border-style 设置绘制边框使用样式 --> <!-- border-color 设置边框使用颜色 --> <!-- 定义边框宽度 --> <!-- 可用属性: --> <!-- css度量单位,如em, px, cm --> <!-- <百分数> --> <!-- thin, medium, thick --> <style type = "text/css"> p { border-width: 10px; } </style> <!-- 定义边框样式 --> <!-- 可用属性: --> <!-- none 没有边框 (默认) --> <!-- dashed 破折线式边框 --> <!-- dotted 圆点线式边框 --> <!-- double 双线式边框 --> <!-- groove 槽线式边框 --> <!-- inset 内嵌效果边框 --> <!-- outset 外凸效果边框 --> <!-- ridge 脊线边框 --> <!-- solid 实线边框 --> <style type = "text/css"> p { border-style: outset; } </style> <!-- 为一条边应用边框样式 --> <!-- border-top-width --> <!-- border-top-style --> <!-- border-top-color --> <!-- border-bottom-width --> <!-- border-bottom-style --> <!-- border-bottom-color --> <!-- border-left-width --> <!-- border-left-style --> <!-- border-left-color --> <!-- border-right-width --> <!-- border-right-style --> <!-- border-right-color --> <style type = "text/css"> p { border-width: 5px; border-style: solid; border-color: black; border-left-width: 10px; border-left-style: dotted; border-top-width: 10px; border-top-style: dotted; } </style> <!-- 使用border简写属性 --> <!-- border: <宽度> <样式> <颜色> --> <!-- border-top: <宽度> <样式> <颜色> --> <!-- border-bottom: <宽度> <样式> <颜色> --> <!-- border-left: <宽度> <样式> <颜色> --> <!-- border-righr: <宽度> <样式> <颜色> --> <style type = "text/css"> p { border: medium outset green; border-top: 10px inset; } </style> <!-- 创建圆角边框 --> <!-- 可用属性: --> <!-- border-top-left-radius: --> <!-- border-top-right-radius: --> <!-- border-bottom-left-radius: --> <!-- border-bottom-right-radius: --> <!-- border-radius: --> <!-- 值可为 <长度值> <百分数> --> <style type = "text/css"> p { border: medium outset green; border-top-left-radius: 10px 5px; border-top-right-radius: 10px; } </style> <style type = "text/css"> p { border: medium outset green; border-radius: 10px / 5px; border-radius: 10px 10px 10px 10px / 5px 5px 5px 5px; } </style> <!-- 水平半径 / 垂直半径 --> <!-- 将图像用作边框 --> <!-- border-image-source: 设置图像来源 --> <!-- border-image-slice: 设置切分图像偏移 --> <!-- border-image-width: 设置图像边框的宽度 --> <!-- border-image-outset: 设置图像向外扩展的部分 --> <!-- border-image-repeat: 设置图像填充边框区域的模式,可为: stretch repeat round --> <!-- border-image: 简写属性 --> <!-- 目前 许多浏览器暂不支持该属性,一些浏览器支持但需要用厂商特定前缀 --> <style type = "text/css"> p { -webkit-border-image: url(icon.png) 30 / 50px; -moz-border-image: url(icon.png) 30 / 50px; -o-border-image: url(icon.png) 30 / 50px; } </style> <!-- 浏览器相应的厂商前缀 --> <!-- chrome safari -webkit- --> <!-- Opera -o- --> <!-- Firefox -moz --> <!-- Internet Explorer -ms- --> <!-- 控制切分图重复方式 --> <!-- border-image-repeat: stretch repeat round space --> <style type = "text/css"> p { -webkit-border-image: url(icon.png) 30 / 50px round repeat; -moz-border-image: url(icon.png) 30 / 50px round repeat; -o-border-image: url(icon.png) 30 / 50px round repeat; } </style> <!-- 设置元素的背景 --> <!-- background-color 背景颜色,显示在背景图像下面--> <!-- background-image 背景图像,如果指定一个以上图像,则后面图像绘制在前面图像的下面--> <!-- background-repeat 图像重复方式--> <!-- background-size 图像尺寸--> <!-- background-position 图像位置--> <!