CSS边框属性
学习目标
边框使用方法
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色。
语法：
border : border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 边框宽度(粗细) |
| border-style | 边框样式 |
| border-color | 边框颜色 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框属性</title>
<style>
div{
/*
样式效果应用在四条边
顺时针，上右下左
*/
width:200px;
height:200px;
border-width:1px;
border-style:solid;
border-color:red;
}
</style>
</head>
<body>
<div>
边框属性
</div>
</body>
</html>
边框样式
边框样式 border-style 可以设置如下值：
| 值 | 含义 |
|---|---|
| dotted | 点状轮廓 |
| dashed | 虚线轮廓 |
| solid | 实线轮廓 |
| double | 双线轮廓 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框属性</title>
<style>
div{
/*
样式效果应用在四条边
两个值得时候应用在上下 左右
*/
width:200px;
height:200px;
border-width:1px;
border-style:solid;
border-color:red;
}
</style>
</head>
<body>
<div>
边框属性
</div>
</body>
</html>
边框样式的不同写法
边框样式的出现可以有1个值，2个值，3个值，4个值，它们分别代表不同方向的边框属性的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框属性</title>
<style>
div{
/*
一个值的时候应用在四条边
两个值的时候应用在上下 左右
三个值的时候应用在上 左右 下
四个值的时候应用在上 右 下 左
*/
width:200px;
height:200px;
border-width:1px 2px 3px;
border-style:solid dashed double;
border-color:red blue yellow;
}
</style>
</head>
<body>
<div>
边框属性
</div>
</body>
</html>
圆角边框
通过对边框的圆角属性的改变，可以完成圆形div的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css边框属性</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div>
块元素
</div>
<div class="ad">
</div>
<span>
行元素
</span>
<b>加粗</b>
</body>
</html>
./style.css文件
/*div{
width:200px;
height:200px;
background-color:#fff;
border:5px solid green;
线的粗细 线的形状 线的颜色
border-color:green yellow pink;
border-style:ridge groove outset inset;
border-width:10px 20px 30px 40px;
}
*/
.ad{
width:200px;
height:200px;
border:5px solid green;
border-radius:50%;
}
课程总结
532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
