CSS边框和背景1
程序员文章站
2022-05-10 23:05:00
...
一.设置边框
1.边框样式
| 属性 | 说明 |
|---|---|
| border-width | 设置边框的宽度 |
| boder-style | 设置边框的样式 |
|---|---|
| boder-color | 设置边框的颜色 |
border-width属性：
|
|
|
|
| 值 | 描述 |
|---|---|
| thin | 定义细的边框 |
| medinum | 默认，定义中等的边框 |
| – | – |
| thick | 定义粗的边框 |
| length | 允许您自定义边框的宽度 |
| -inherit- | -规定应该从元素继承边框宽度- |
自定义边框的宽度时，不能定义为百分比。
以上属性可以设置一个、二个、三个、四个属性值，当设置
一个值得时候四条边框都应用该属性值，当设置两个的时候
-时候上下使用第一个属性值，左右使用第二个属性值，当设
置三个值的时候，第一个值应用在上边框，第二个应用到左
右边框，第三个属性值应用到下边框当设置了四个属性值，
按着顺时针的方向一次应用。大部分情况下groove、ridge、
inset、outset可以会使用双色边框，但是当border-color属
性这设置成black是，两种颜色都会显示成黑色。
2、为一条边应用边框样式
boder-top/bottom/right/left-width/style/color 用来设置一条边框的
样式，可以和通用属性结合使用。还可以使用border-bottom/top/le
ft/right一次设置一条边框。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 100px;
9 height:200px;
10 border-width: 10px;
11 border-style: ridge;
12 border-color: red;
13 border-top-style: double;
14 }
15 </style>
16 </head>
17 <body>
18 <div>
19
20 </div>
21 </body>
22 </html>
3、使用border简写属性
可以使用一次来设置border的宽度、样式、颜色，三个属性值之间用空格分开。三个属性之间的顺序可以打乱。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 100px;
9 height:200px;
10 border:solid 2px red ;
11 }
12 </style>
13 </head>
14 <body>
15 <div>
16
17 </div>
18 </body>
19 </html>