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 图像位置-->
<!-- background-attachment 图像是否固定或随页面一起滚动-->
<!-- background-clip 图像裁剪方式-->
<!-- background-origin 图像绘制起始位置-->
<!-- background 简写属性-->
<!-- 设置背景图像和颜色 -->
<style type = "text/css">
body {
background-color: lightgray;
background-image: url(pic.jpg);
background-size: 40px 40px ;
background-repeat: repeat-x ;
background-attachment: fixed;
}
</style>
<!-- background-repeat 可用属性 repeat-x, repeat-y, repeat, space, round, no-repeat -->
<!-- background-size 可用属性: contain, cover, auto -->
<!-- background-position 可用属性: top, left, right, bottom, center -->
<!-- background-attachment 可用属性: fixed(背景固定在视窗上), -->
<!-- local(背景随滚动条一起动), -->
<!-- scroll(背景固定在元素上) -->
<!-- background-origin 和 background-clip 可用元素 -->
<!-- border-box 在边框盒子内部-->
<!-- padding-box 在内边距盒子内部-->
<!-- content-box 在内容盒子内部-->
<!-- 使用background简写属性 -->
<style type = "text/css">
table {
background: lightgray top right no-repeat border-box content-box local url();
}
</style>
<!-- 有些浏览器还不支持这个 background 简写属性 -->
<!-- 创建盒子阴影 -->
<!-- box-shadow: -->
<!-- box-shadow: hoffset voffset blur spread color inset -->
<!-- hoffset 阴影水平偏移量,正值右移,负值左移 -->
<!-- voffset 阴影垂直偏移量,正值下方,负值上方 -->
<!-- blur (可选) 模糊值, 值越大越模糊,默认为0,边界清晰 -->
<!-- spread (可选) 阴影延伸半径,正值扩大,负值缩小 -->
<!-- color (可选) 阴影颜色 -->
<!-- inset (可选) 将外部阴影设置为内部阴影 -->
<!-- 可以在box-shadow中定义多个阴影,只需要用逗号隔开 -->
<style type = "text/css">
table {
box-shadow: 5px 4px 10px 2px gray;
}
</style>
<style type = "text/css">
table {
box-shadow: 5px 4px 10px 2px gray / 4px 4px 6px gray inset;
}
</style>
<!-- 应用轮廓 -->
<!-- 轮廓绘制在盒子边框的外面,轮廓不属于页面,应用轮廓不需要调整页面布局 -->
<!-- outline-color: 外围轮廓颜色 -->
<!-- outline-offset: 轮廓距离元素边框偏移量 -->
<!-- outline-style: 轮廓样式 和 border-style一样 -->
<!-- outline-width: 轮廓宽度 -->
<!-- outline-color: 简写属性 -->
<style type = "text/css">
table {
outline-offset: 20px;
outline-style: outset;
outline-width: 3px;
}
</style>