CSS border-left 属性值说明
| 值 | 说明 |
|---|---|
| border-left-width | 设置元素的左边框宽度。默认值为“medium”。必需值。 |
| border-left-style | 设置元素左边框的线条样式。默认值为“none”。必需值。 |
| border-left-color | 设置元素左边框的颜色。默认值是文本的当前颜色。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
CSS border-left 属性用于设置元素左边框的宽度、线条样式和颜色。
它是用于指定以下值的速记属性：
- border-left-width
- border-left-style
- border-left-color
速记属性的这三个值可以按任意顺序指定，可以省略其中的一两个。
如果没有指定颜色，则该值将从颜色属性中获取。
如果未定义颜色属性，则默认采用当前颜色。
如果没有指定宽度，它将采用元素的中等大小。
| 初始值 | medium none 当前颜色 |
|---|---|
| 应用于 | 所有元素。它也适用于::first-letter。 |
| 继承 | 不 |
| 可动画的 | 边框的颜色和宽度可以设置动画。 |
| 版本 | CSS1 |
| DOM 语法 | object.style.borderLeft= "1px solid black"; |
语法
border-left: border-width border-style border-color | initial | inherit;
border-left 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border-left: 3px solid #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border-left 示例</h2>
<div> 这是 border-left 属性的一个简单示例。</div>
</body>
</html>
结果
应用于不同元素的 border-left 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
h1,
p,
div {
padding: 10px;
}
h1 {
border-left: 5px solid #8ebf42;
}
p {
border-left: 4px dotted #1c87c9;
}
div {
border-left: thick double #666;
}
</style>
</head>
<body>
<h1>带有纯绿色左边框的标题</h1>
<p>带有蓝色虚线左边框的标题。</p>
<div>一个带有粗双左边框的 div 元素。</div>
</body>
</html>
使用 <div> 元素创建一个框并为框和左边框设置背景颜色。
<div> 元素的 border-left 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-left: 20px ridge #8ebf42;
background-color: #ccc;
height: 100px;
width: 200px;
font-weight: bold;
text-align: center;
padding: 3px;
}
</style>
</head>
<body>
<div>
<p>在左边有一凸起边框</p>
</div>
</body>
</html>
日期：2020-06-02 22:14:19 来源：oir作者：oir