当前位置:首页 > css相关 > 正文内容

三剑客实战之Css入门基础知识[css边框属性教程一]

CSS 边框属性

关键词:border

border 属性允许您指定元素边框的颜色和宽度以及样式。

CSS 边框样式

关键词:border-style 

border-style 属性作用于指定显示的边框外观类型。可以设置一到四个值(用于上边框、右边框、下边框和左边框)。

以下为取值范围定义:

CSS 边框样式表

定义
none
无边框


hidden
隐藏边框


solid
实线边框


dashed
虚线边框


dotted
点线边框


double
双边框


inset
3D inset 边框  参考【border-color】 值


groove
3D 坡口边框  参考【border-color】 值


ridge
3D 脊线边框  参考【border-color】 值


outset 
3D outset 边框  参考【border-color】 值

提示:除非设置了 border-style 属性,否则其他 CSS 边框属性将不会起到作用!

CSS 边框宽度

关键词:border-width

border-width 属性指定四个边框的宽度。

特定边的宽度可以设置一到四个值(用于上边框、右边框、下边框和左边框),也可将宽度设置为特定大小(以 px、pt、cm、em 计),也可以使用以下三个预定义值之一:thin、medium 或 thick。

演示:

p.one {
  border-style: solid;
  border-width: 5px;
  }
  
p.two {
  border-style: solid;
  border-width: medium;
  }
  
p.three {
  border-style: dotted;
  border-width: 2px;
  } 
  
p.four {
  border-style: dotted;
  border-width: thick;
  }
  
p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上边框和下边框为 5px,其他边为 20px */
  }
  
p.two {
  border-style: solid;
  border-width: 20px 5px; /* 上边框和下边框为 20px,其他边为 5px */
  }
  
p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上边框 25px,右边框 10px,下边框 4px,左边框 35px */
  }

CSS 边框颜色

关键词:border-color 

border-color 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)。也可设置四个方向边框颜色。

name - 指定颜色名,比如 "red"

HEX - 指定十六进制值,比如 "#ff6600"

RGB - 指定 RGB 值,比如 "rgb(120,255,0)"

HSL - 指定 HSL 值,比如 "hsl(0, 800%, 30%)"

transparent

提示:如果未设置 border-color,则它将继承元素的颜色。

可以通过以下方式设置颜色:

p.one {
  border-style: solid;
  border-color: red;
  }
p.two {
  border-style: solid;
  border-color: green;
  }
p.three {
  border-style: dotted;
  border-color: blue;
  }
/*特定边框的颜色 */
p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
  }

/*HEX 值 */
p.one {
  border-style: solid;
  border-color: #ff0000;/* 红色 */
  }

/*RGB 值 */
p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0);/* 红色 */
  }

/*HSL 值 */
p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%);/* 红色 */
  }

在 CSS 中,还有一些属性可用于指定每个边框(顶部、右侧、底部和左侧)。 CSS 边框各边

如果 border-style 属性设置四个值:

border-style: dotted solid double dashed;

上边框是虚线

右边框是实线

下边框是双线

左边框是虚线


如果 border-style 属性设置三个值:

border-style: dotted solid double;

上边框是虚线

右和左边框是实线

下边框是双线


如果 border-style 属性设置两个值:

border-style: dotted solid;

上和下边框是虚线

右和左边框是实线


如果 border-style 属性设置一个值:

border-style: dotted;

四条边均为虚线

示例代码:

/* 四个值 */
p {
  border-style: dotted solid double dashed; 
}

/* 三个值 */
p {
  border-style: dotted solid double; 
}

/* 两个值 */
p {
  border-style: dotted solid; 
}

/* 一个值 */
p {
  border-style: dotted; 
}

上例中使用的是 border-style 属性。但 border-width 和 border-color 也同样适用。

CSS 简写边框属性

关键词: Border - 简写属性

就像您在上一章中所见,处理边框时要考虑许多属性。也可以在一个属性中指定所有单独的边框属性,这是为了缩减代码,

各个边框属性的简写属性:

border-width

border-style(必需)

border-color

代码示例:

p {
  border: 5px solid red;/*含义:5px的红色实线边框。此属性是 border-width、border-style 以及 border-color 的简写属性*/
  }

p {
  border-left: 6px solid red;/*含义:左边分布6px的红色实线边框*/
  background-color: lightgrey;/*背景颜色为lightgrey*/
  }
  
p {
  border-bottom: 6px solid red;/*含义:下边分布6px的红色实线边框*/
  background-color: lightgrey;/*背景颜色为lightgrey*/
}


扫描二维码推送至手机访问。

版权声明:本文由uuucd.cn发布,如需转载请注明出处。

本文链接:https://www.uuucd.cn/css/56.html

标签: css相关

相关文章

利用css隐藏元素的5种方法之[Display属性简介]

利用css隐藏元素的5种方法之[Display属性简介]

用 CSS 隐藏页面元素有许多种方法。但是每个方法之前是存在着细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法。你可以将 将 visibility 设为 hidden、将 display 设为 none、opacity 设为 0、...

Css 及 Html5之初学者基础教程[前端语言基础]

Css 及 Html5之初学者基础教程[前端语言基础]

前端语言基础:HTML5 & CSS(一) HTML5:超文本标记语言1) :基本概念Ω是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 )Ö这些标签以<标签名称>的形式出现,用于标记...

三剑客实战之Css入门基础知识一[语法基础之选择器]

三剑客实战之Css入门基础知识一[语法基础之选择器]

CSS 语法CSS 规则集(rule-set)由选择器和声明块组成:选择器指向您需要设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。多条 CSS 声明用分号分隔,声...

三剑客实战之Css入门基础知识[css控制颜色]

三剑客实战之Css入门基础知识[css控制颜色]

css中,控制指定颜色是通过使用预定义的颜色名称,或 RGB、HEX、HSL、RGBA、HSLA 值,在 CSS 中,可以使用颜色名称来指定颜色,CSS/HTML 支持 140 种标准颜色名。CSS 文本颜色下面是简单设置文本的颜...

三剑客实战之Css入门基础知识[CSS 背景属性定义]

三剑客实战之Css入门基础知识[CSS 背景属性定义]

CSS 背景属性:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position background-color...

三剑客实战之Css入门基础知识[css边框属性教程二]

三剑客实战之Css入门基础知识[css边框属性教程二]

CSS 圆角边框关键词:border-radius 用于向元素添加圆角边框关键代码及举例:p { border: 3px; solid red;/*普通边框*/ } p ...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。