CSS-12.css边框属性（border）

在盒子模型中我们通常会给盒子设置边框属性，使之完成某些功能和样式

我们会使用css中的border属性来设置边框

一般会通过连写来设置border，他下面还有width,style,color的属性，

在开发中，我们会使用连写。

写法1：（按照方向）

快捷键：bd+

border: 1px solid #000; 这样的属性设置，四个边框属性值是相同

当然我们也可以分别设置四个边框的属性：

快捷键：bdt+

border-top: 1px solid #000;

快捷键：bdr+

border-right: 2px solid #000;

快捷键：bdb+

border-bottom: 3px solid #000;

快捷键：

border-left: 4px solid #000;

其中的属性分别是：width,style,color.

写法2：（按照属性）

border-width:1px 2px 3px 4px;

border-style:none dashed double dotted;

border-color:red green white black;

注意点：1.这四个属性按照上右下左来赋值，顺序不能错。

2.这四个属性值是可以省略的，例如，当你只写上右下的时候，没写左边

这时，左边的属性会按照右边的属性，当你没设置下和右的时候，下会和上

一样，左会和上一样。当你只写了第一个，那么这四条边框会都会按照第一个

来取值。

写法3：（单独设置）

还可以单独设置每条边框单独的属性值，例如：

border-right-width:3px;

border-left-style:double;

border-bottom-color:red;

border-style 有很多取值：

实例代码：

<!DOCTYPE html>

<head>

<style>

.box{

height: 100px;

width: 100px;

background-color: #3385ff;

border-top:1px double #000;

border-right:2px dashed red;

border-bottom:3px outset white;

border-left: 4px solid #000;

}

</style>

</head>

<body>

</body>

</html>

另类使用：

.box{

height: 0px;

width: 0px;

border-width:25px;

border-style:solid;

border-color: red green blue purple;

}

效果：将div的宽高设置为零，用边框强制拉伸出体积，此时是25px*25px.

将此代码修改一下：

.box{

height: 0px;

width: 0px;

border-width:25px;

border-style:solid;

border-color: red white white;

border-bottom:none;

}

效果：将div的宽高设置为零，，top的color设置为红色，其他部分设置为白色，就会出现下拉符号，企业开发中，这种简单的图形，能用代码实现，就用代码实现。

CSS-12.css边框属性（border）相关推荐

java border边框_简单实用的css边框属性border
本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式. 预备知识 border相关属性 border-width 边框的宽度 border-style 边框的样式 borde ...
CSS修改tr边框属性
因为表格中的tr并非单一的边框,这样便需要属性border-collapse,border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示. ...
html5表格隐藏右边框,HTML表格的边框属性BORDER
默认情况下,表格的边框为0,我们可以为表格设置边框线. 基本语法语法解释通过BORDER属性定义边框线的宽度,单位为像素. 文件范例:10-2.htm 设定边框线的宽度. 01 02 03 04 ...
php表格线属性在哪里,HTML_HTML表格标记教程(2):表格的边框属性BORDER，默认情况下，表格的边框为0， - phpStudy...
默认情况下,表格的边框为0,我们可以为表格设置边框线. 基本语法语法解释通过BORDER属性定义边框线的宽度,单位为像素. 文件范例:10-2.htm 设定边框线的宽度. 01 02 03 04 ...
Html中的边框弧边,CSS边框属性一---border-radius
1.CSS outline 属性 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. p { outline:#00FF00 dotted thick; } ...
2_31_CSS 属性、CSS与CSS3的属性值和单位_191022
css属性 font-family font-size font-style color 一.CSS属性值和单位 1.字符如果值为若干单词,则要给值加引号. 如:p{ font-family:&qu ...
css修饰边框为虚线,css如何设置虚线边框css虚线样式？css设置虚线边框的方法示例...
首页 >web前端>css教程>正文 css如何设置虚线边框?css设置虚线边框的方法示例原创2018-10- 在网页布局中,有时候为了整体网页的美观可能需要设置虚线边框,那么虚线 ...
【html5+css】文字样式 line-height 和 vertical-align css背景 css边框
**一.文字样式字体可以是列表的形式,一般英语字体放到前面,后面的字体是前面的字体的后备字体字体名称中有空格,必须要用引号来包裹** font-weight:指定字体粗细 -blod normal ...
css样式之边框和内外边距
1.css样式之边框:border 实心的边框: <!DOCTYPE html> <html> <head> <meta http-equiv="c ...
html在线测试 css,HTML+CSS测试
HTML+CSS检测一:填空题 1.网页分为_______________________和_________________________ . 2.HTML的结构包括_____________ ...

CSS-12.css边框属性（border）

CSS-12.css边框属性（border）相关推荐

最新文章

热门文章