老雷html/css开发视频教程之边框背景
一、border
1.border：<line-width> || <line-style> || <color>
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
.box{
border:1px solid #eee;
}
2.属性拆分
border-width:1px
border-style:solid;
border-color:#eee;
3.方向拆分
border-top
border-right
border-bottom
border-left
二、边框圆角 border-radius
border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
.box{
border:1px solid #eee;
border-radius:5px;
border-radius: 5px/10px;
}
方向拆分
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
三、阴影 box-shadow
none： 无阴影
<length>①： 第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧
<length>②： 第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部
<length>③： 第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。不允许负值
<length>④： 第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩
<color>： 定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色
inset： 定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影
.box{
box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
}
四、背景 background
由于背景参数较多所以推荐大家使用拆分背景属性
1、background-image 指定元素使用的背景图像。可以是图片路径或使用渐变创建的“背景图像”
.box{
background-image:url(bg.jpg);
}
2.background-position 指定背景图像在元素中出现的位置。
<percentage> 百分比
<length> 用长度值指定背景图像在元素中出现的位置。可以为负值。
center 背景图像横向或纵向居中。
left 背景图像从元素左边开始出现。
right 背景图像从元素右边开始出现。
top 背景图像从元素顶部开始出现。
bottom 背景图像从元素底部开始出现。
div{
background-position: -68px -34px;
background-position: center;
}
background-size 指定背景图像尺寸。
<percentage> 百分比
<length> 用长度值指定背景图像在元素中出现的位置。可以为负值。
auto 背景图像的真实大小。
cover 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
div{
background-size:100px 140px;
background-size:cover;
}
background-repeat 指定背景图像如何填充。
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向上平铺
repeat 背景图像在横向和纵向平铺
no-repeat 背景图像不平铺
round 当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3）
space 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（CSS3）
div{
background-repeat: no-repeat;
}
background-attachment 定义滚动时背景图像相对于谁固定。
fixed 背景图像相对于视口（viewport）固定。
scroll 背景图像相对于元素固定,默认
div{
background-attachment: fixed;
}
background-origin 指定背景图像从元素的哪个区域作为显示的原点。
border-box 从border区域（含border）开始显示背景图像。
padding-box 默认值，从padding区域（含padding）开始显示背景图像。
content-box 从content区域开始显示背景图像。
div{
background-origin:border-box;
}
background-clip 指定背景图像向外裁剪的区域。
border-box 默认值从border区域（含border）开始向外裁剪背景。
padding-box 从padding区域（含padding）开始向外裁剪背景。
content-box 从content区域开始向外裁剪背景。
div{
background-clip:content-box;
}
Q-color 指定背景颜色
div{
background-color: #808080;
}
综合
.box{
background-image:url(bg.jpg);
background-position: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
border:1px solid #eee;
border-radius: 5px;
background-color: #0F8E82;
margin-bottom: 10px;
}
.box2{
width:200px;
height:500px;
border-width: 1px;
border-style:solid;
border-color:#f00;
border-radius: 5px;
background-image: url(../img/bg.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position: center;
background-size:100%;
box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
background-origin:border-box;
}
.icon{
background-image: url(../img/icons.jpg);
background-size: 198px 58px;
width:36px;
height: 36px;
display: inline-block;
background-repeat: no-repeat;
margin-top: 20px;
background-clip:content-box;
}
.icon-a{
background-position:-8px -12px;
}
.icon-b{
background-position:-43px -12px;
}
.icon-c{
background-position:-77px -12px;
}
.icon-d{
background-position:-111px -12px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div>
<div class="icon icon-a"></div>
<div class="icon icon-b"></div>
<div class="icon icon-c"></div>
<div class="icon icon-d"></div>
</div>
</body>
</html>