边框属性
border属性定义元素的边框。
写法:
border-width--边框的宽度。
border-style--边框的样式(实线、虚线、双实线、凹凸边等)。
border-color--边框的颜色。
缩写形式:border: border-width||border-style||border-color;
border-image属性
border-image属性定义元素边框图片,用图片代替边框,边框图片超出边框的量,是否重复图片、拉伸图片、铺满图片。
写书:-webkit-border-image: url('url') 30 repeat; 兼容谷歌。
-o-border-image: url('url') 30 repeat; 兼容欧朋。
-moz-border-image: url('url') 30 repeat; 兼容火狐。
border-image: url('url') 30 repeat; W3C标准。
border-image-source属性
border-image-source属性指定要使用的图片,代替border-style中设置的样式。
书写:border-image-source: url('url');
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>边框和轮廓属性</title>
<style>
#div1 {
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid transparent;
border-image-source: url('border-image.png');
}
</style>
</head>
<body>
<div id="div1"> 边框属性 </div>
</body>
</html>
效果如下:
border-image-outset属性
border-image-outset属性指定边框图像超过边框的量。包括上下、左右的量。
书写:border-image-outset: 3px 3px 3px 3px;
设置边框图像超出边框各5px:
#div1 {
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid transparent;
border-image-source: url('border-image.png');
border-image-outset: 5; /* 设置图像超出边框5px */
}
效果如下:
border-image-slice属性
border-image-slice属性指定边框图像向内的偏移量。此属性指顶部、右边缘、底部、左边缘向内的偏移量,分为九个区域:四个角、四个边、内部(中心)等。一般内部为透明的,除非填写关键字(fill)填充。
书写:border-image-slice: number||%||fill ;
例:border-image-slice: 3 3 3 3;
例如:当设置偏移量为5px时,
#div1 {
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid transparent;
border-image-source: url('border-image.png');
border-image-outset: 5; /* 设置图像超出边框5px */
border-image-slice: 5;
}
效果如下:
当设置偏移量为15px时:
#div1 {
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid transparent;
border-image-source: url('border-image.png');
border-image-slice: 15;
}
效果如下:
当偏移量设置为40px时:
#div1 {
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid transparent;
border-image-source: url('border-image.png');
border-image-slice: 40;
}
效果如下:
border-image-repeat属性
border-image-repeat属性指定边框图像是否重复显示(repeat)、拉伸显示(stretched)、铺满显示(rounded)。
书写:border-image-repeat: repeat||stretched||rounded;
例如重复显示(repeat):
#div1 {
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid transparent;
border-image-source: url('border-image.png');
border-image-slice: 20;
border-image-repeat: repeat;
}
效果如下:
border-image-width属性
border-image-width属性指定图像边框的宽度 。
宽度为30px时:
#div1 {
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid transparent;
border-image-source: url('border-image.png');
border-image-width: 30px; /* 图像边框的宽度 */
border-image-slice: 20;
}
效果如下:
当用图像代替边框样式时,可以缩写为:
border-image: border-image-source||border-image-slice||border-image-repeat;
超出边框的距离和图像的宽度另起一行写:border-image-outset、border-image-width
border-radius属性
border-radius属性指定边框的圆角样式, 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角
#div1 {
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid red;
border-radius: 10px 15px 20px 40px; /* 分别为四个角定义圆角的半径 */
}
效果如下:
box-shadow属性
box-shadow属性定义边框阴影部分。
书写:box-shadow: 1px 1px 5px 20px red;
分别对应在x轴上偏移、y轴上的偏移、模糊程度、阴影的大小、阴影的颜色。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>边框和轮廓属性</title>
<style>
#div1 {
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid red;
border-radius: 10px 15px 20px 40px;
box-shadow: 15px 15px 25px 16px blue;
}
</style>
</head>
<body>
<div id="div1"> 边框属性 </div>
</body>
</html>
效果如下:
轮廓属性
outline(轮廓)是元素周围的一条线,位于边框边缘的外围,起突出元素的作用。
书写:与border相似
outline-width--轮廓的宽度。
outline-style--轮廓的样式。样式与border的样式相似,也有多种样式。
outline-color--轮廓的颜色。
缩写:outline: outline-width outline-style outline-color;
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>边框和轮廓属性</title>
<style>
#div1 {
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid red;
outline: 5px solid blue;
}
</style>
</head>
<body>
<div id="div1"> 边框属性 </div>
</body>
</html>
效果如下:
在边框的外围有蓝色的部分为元素的外围。
注:border与outline的区别:
border(边框)是要占据空间的,而outline(轮廓)是不占据空间的。
例:
当设置轮廓宽度为5px时,
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>边框和轮廓属性</title>
<style>
div {
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid red;
outline: 5px solid blue;
}
</style>
</head>
<body>
<div id="div1"> 边框属性 </div>
</body>
</html>
效果:
元素大小150像素
当增大轮廓宽度时,即10px时:
div {
width: 100px;
height: 100px;
padding: 15px;
border: 10px solid red;
outline: 10px solid blue;
}
效果:
可以看出此时,元素的宽度依然是150像素。
而当我们减少border的宽度为5px时:
div {
width: 100px;
height: 100px;
padding: 15px;
border: 5px solid red;
outline: 10px solid blue;
}
效果:
可以看出此时元素的宽度不再是150像素,而是140像素,因此我们减少了元素的宽度。