css-边框（border）

设置边框样式（border-style）
用于定义页面中边框的风格，常用属性：
none：没有边框线，即忽略所有边框的宽度（默认值）
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
在设置边框样式时，既可以对盒子的单边进行设置，也可以综合设置四条边的样式，常用属性：
border-top-style：上边框样式
border-right-style：右边框样式
border-bottom-style：下边框样式
border-left-style：左边框样式
border- style：上边框样式右边框样式下边框样式左边框样式
border- style：上边框样式左右边框样式下边框样式
border- style：上下边框样式左右边框样式
border- style：上下左右边框样式
案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置边框样式</title>
<style type="text/css">h2{border-style: solid;         /*四条边框相同--单实线*/}.one{border-style: dotted double;   /*上下为点线左右为双实线*/}.two{border-style: dashed dotted solid;/*上虚线、左右点线、下实线*/}
</style>
</head><body>
<h2>边框为单实线</h2>
<p class="one">上下边框为点线。左右边框为双实线</p>
<p class="two">上边框虚线、左右边框点线、下边框实线</p>
</body>
</html>

注意：点线dotted和虚线dashed样式存在兼容性问题。实际网页制作中，通常使用插入背景图像的形式实现点线或虚线的边框效果。
2. 设置边框宽度（border-width）
常用取值单位：像素px，常用属性：
border-top-width：上边框宽度
border-right-width：右边框宽度
border- botttom-width：下边框宽度
border- left-width：左边框宽度
border-width：上边框宽度[右边框宽度下边框宽度左边框宽度]
案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置边框高度</title>
<style type="text/css">.one{border-width: 6px;}.two{border-width: 4px 2px;}.three{border-width: 6px 4px 3px;}p{border-style: solid;}
</style>
</head><body>
<p class="one">边框宽度-2px。边框样式-单实线。</p>
<p class="two">边框宽度-上下3px，左右1px。边框样式-单实线。</p>
<p class="three">边框宽度-上3px，左右1px，下2px。边框样式-单实线。</p>
</body>
</html>

注意：在设置边框时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。
3. 设置边框颜色（border-color）
取值为预定义的颜色值、十六进制#RRGGBB或RGB格式rgb(r,g,b)，实际工作中最常用
的是十六进制#RRGGBB。
边框的默认颜色为元素本身的文本颜色，对于没有文本的元素，其默认边框为父元素的
文本颜色。属性：
border-top-color:上边框颜色
border- right-color:右边框颜色
border-bottom-color:下边框颜色
border-left-color:左边框颜色
border- color:上边框颜色[右边框颜色下边框颜色左边框颜色]
案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置边框颜色</title>
<style type="text/css">h2{border-style: solid;         /*综合设置边框样式*/border-top-color: #ff0000;      /*单独设置上边框颜色*/}p{border-style: solid;            /*综合设置边框样式*/border-color: #ccc #ff0000;     /*设置边框颜色：两个值为上下、左右*/}
</style>
</head><body>
<h2>设置边框颜色</h2>
<p>设置边框颜色</p>
</body>
</html>

注意：设置边框颜色时同样必须设置边框的样式，如果未设置样式或设置为none，则其他边框属性无效。
4. 综合设置边框
基本格式：border：宽度样式颜色；（宽度样式颜色的顺序不分先后，省略部分取默
认值，样式不能省略）。
案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>综合设置边框</title>
<style type="text/css">h2{border-top: 3px dashed #243d52;      /*单侧符合属性设置各边框*/border-right: 10px double #63abe8;border-bottom: 5px double #85f2da;border-left: 10px solid #1a5fad;}.wangya{border: 15px solid #4a4c5e;         /*border复合属性设置各边框相同*/}</style>
</head><body>
<h2>综合设置边框</h2>
<img class="wangya" src="pic1.png" alt="网页平面设计" />
</body>
</html>
```![最后一个案例所需图片](https://img-blog.csdnimg.cn/pic1.png#pic_center)

css-边框（border）相关推荐

css边框(border)属性
border属性代码如下: border:边框宽度边框风格边框颜色; 如:border:5px solid #555; 属性: (1)边框宽度: border-width:5px; (2)边框颜 ...
3、CSS 边框border
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS边框属性允许你指定一个元素边框的样式和颜色. CSS 边框 ...
html中边框与边框距离,css边框border与margin属性
CSS边框属性: border不能分别定义4个边框的宽度,颜色和样式,只能统一定义,不可以对四个边设置不同的值,和margin与padding是不同的(后两者可以分别定义四个边的值). border- ...
CSS边框border
基础样式边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度).边框颜色和边框样式,且先后顺序无关 border: border-width border-color border-style ...
css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
CSS中Border(边框)
1.css边框 css边框(border)可以使围绕元素内容和内边距的一条或多条线,对于这些线条,可以直接自定义它们的样式,宽度颜色等. 2.边框样式 border-style的值 | none 默认 ...
Html中的边框弧边,CSS边框属性一---border-radius
1.CSS outline 属性 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. p { outline:#00FF00 dotted thick; } ...
css有棱角的边线,CSS边框与边界
(上右下左依次体现)à边框的同一属性名称可以同时使用多个属性值简化方案:border: 长度形态颜色例如 border:1px solid black; 16.2 CSS中边界的使用 padd ...
CSS边框（实线、虚线、破折号）
1.CSS边框 border:1px solid red; /*实线*/ border:1px dotted red; /*虚线*/ border:1px dashed red; /*破折号*/ 转载 ...
在css的框中打文字,css 边框上如何写入文字？
方法一: 1.首先,打开html编辑器,新建html文件,例如:index.html. 2.在index.html中的标签中,输入html代码:. 文字 3.浏览器运行index.html页面,此时 ...

css-边框（border）

css-边框（border）相关推荐

最新文章

热门文章