边框
边框圆角
border-radius
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:350px;
height: 300px;
border:1px solid red;
border-radius:20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下:
border-raduis属性,其后也可以添加2个,3个,4个值。分别能够控制上左,上右,下右,下左,顺时针方向的圆角.
border-radius:20px 40px 60px 80px;
效果如下:
边框阴影
box-shadow
值 | 描述 |
---|---|
h-shadow | 必需 水平阴影的位置 允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
示例:
div{
width:350px;
height: 300px;
background-color: red;
box-shadow: 10px 10px 5px green;
}
效果如下:
属性值前三个代表其阴影出现的位置,最后一个值代表颜色。
边框背景
border-image
值 | 描述 |
---|---|
border-image-source | 用在边框的图片的路径。 |
border-image-slice | 图片边框向内偏移。 |
border-image-width | 图片边框的宽度。 |
border-image-outset | 边框图像区域超出边框的量。 |
border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
示例:
div{
width:350px;
height: 300px;
border: 30px solid #000;
border-image:url(img/flower.jpeg) 50 50 round;
}
效果如下:
round属性值,让图片铺满整个边框;stretch 属性值,图片被拉伸以填充边框。
背景
background-size
值 | 描述 |
---|---|
length | 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。 |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 |
div{
width:350px;
height: 300px;
border: 1px solid #000;
background:url(img/flower.jpeg);
background-size:100px 100px ;
background-repeat:no-repeat;
}
效果如图:
background-origin
值 | 描述 |
---|---|
padding-box | 背景图像相对于内边距框来定位。 |
border-box | 背景图像相对于边框盒来定位。 |
content-box | 背景图像相对于内容框来定位。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width: 300px;
border:1px solid black;
padding:35px;
background-image:url('img/flower.jpeg');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<div id="div1">
背景图像相对于边框盒来定位
</div>
<div id="div2">
背景图像相对于内容框来定位
</div>
</body>
</html>
效果如图:
background-clip
规定背景的绘制区域。
值 | 描述 |
---|---|
border-box | 背景被裁剪到边框盒 |
padding-box | 背景被裁剪到内边距框 |
content-box | 背景被裁剪到内容框 |