CSS属性之边框和轮廓属性

来源：互联网发布：音频数据压缩算法编辑：程序博客网时间：2024/06/05 19:06

边框属性

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像素，因此我们减少了元素的宽度。

0 0