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

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

CSS 圆角边框

关键词:border-radius 

用于向元素添加圆角边框

关键代码及举例:

p {
	border: 3px; solid red;/*普通边框*/
}

p {
	border: 3px; solid red;
	border-radius: 8px;/*圆角8px边框*/
}

这是一个普通的红色边框

这是一个普通的红色圆角边框

p 例一 {
 border-style: solid;
 border-left-width: 15px;/*左边实线分布宽度为15px的边框*/
}

p 例二 {
 border-style: solid;
 border-right-color: #ff0000;/*设置右边框的颜色为红色*/
}

p 例三 {
 border-style: solid;
 border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);/*设置四条边框的四种颜色*/
}

注意:如果单独使用,"border-left-width" 属性不起作用。请首先使用"border-style" 属性来设置边框。

所有 CSS 边框属性

属性描述格式关键代码案例
border简写属性,在一条声明中设置所有边框属性。border:5px solid red;/*设置 4 个边框的样式*/
border-color简写属性,设置四条边框的颜色。border-color:#ff0000 #0000ff;
border-radius简写属性,可设置圆角的所有四个 border-*-radius 属性。

border:2px solid;/*2px的实线*/

border-radius:25px;/*添加圆角边框*/

border-style简写属性,设置四条边框的样式。border-style:solid;
border-width简写属性,设置四条边框的宽度。

border-style:solid;

border-width:15px;

border-bottom简写属性,在一条声明中设置所有下边框属性。

border-style:solid;

border-bottom:thick dotted #ff0000;

border-bottom-color设置下边框的颜色。

border-style:solid;

border-bottom-color:#ff0000;

border-bottom-style设置下边框的样式。

border-style:solid;

border-bottom-style:dotted;/

border-bottom-width设置下边框的宽度。

border-style:solid;

border-bottom-width:15px;

border-left简写属性,在一条声明中设置所有左边框属性。

border-style:solid;

border-left:thick double #ff0000;

border-left-color设置左边框的颜色。

border-style:solid;

border-left-color:#ff0000;

border-left-style设置左边框的样式。

border-style:solid;

border-left-color:#ff0000;


border-left-width设置左边框的宽度。border-style:solid;

border-left-width:15px;

border-right简写属性,在一条声明中设置所有右边框属性。

border-style:solid;

border-right:thick double #ff0000;

border-right-color设置右边框的颜色。

border-style:solid;

border-right-color:#ff0000;

border-right-style设置右边框的样式。

border-style:solid;

border-right-style:dotted;

border-right-width设置右边框的宽度。

border-style:solid;

border-right-width:15px;

border-top简写属性,在一条声明中设置所有上边框属性。border-style:solid;

border-top:thick double #ff0000;

border-top-color设置上边框的颜色。

border-style:solid;

border-top-color:#ff0000;

border-top-style设置上边框的样式。

border-style:solid;

border-top-style:dotted;

border-top-width设置上边框的宽度。

border-style:solid;

border-top-width:15px;

CSS 外边距

关键词:margin

margin 属性用于在任何定义的边框之外,为元素周围创建空间。通过 CSS,您可以完全控制外边距。有一些属性可用于设置元素每侧(上、右、下和左)的外边距。

Margin - 单独的边

CSS 拥有用于为元素的每一侧指定外边距的属性:

margin-top (上)

margin-right (右)

margin-bottom (下)

margin-left (左)


所有外边距属性都可以设置以下值:

auto - 浏览器来计算外边距

length - 以 px、pt、cm 等单位指定外边距

% - 指定以包含元素宽度的百分比计的外边距

inherit - 指定应从父元素继承外边距

提示:允许负值。

关键代码举例:

<style>
div {
  border: 1px solid black;
  margin-top: 100px;/*上外边距为 100 像素*/
  margin-bottom: 100px;/*下外边距是 100 像素*/
  margin-right: 150px;/*右外边距是 150 像素*/
  margin-left: 80px;/*左外边距是 80 像素*/
  background-color: lightblue;/*定义背景颜色为lightblue*/
}
</style>

Margin - 简写属性

关键词:margin

为了缩减代码,可以在一个属性中指定所有外边距属性。margin 属性是以下各外边距属性的简写属性:

margin-top (上)

margin-right (右)

margin-bottom(下)

margin-left (左)

工作原理是这样的,如果 margin 属性有四个值:

margin: 25px 50px 75px 100px;

那么定义解释为:

上外边距是 25px

右外边距是 50px

下外边距是 75px

左外边距是 100px

代码举例:

div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;/*这个 div 元素的上外边距是 25 像素,右外边距是 50 像素,下外边距是 75 像素,左外边距是 100 像素。*/
  background-color: lightblue;
}

如果 margin 属性设置两个值:

margin: 25px 50px;

上和下外边距是 25px

右和左外边距是 50px


如果 margin 属性设置了一个值:

margin: 25px;

所有四个外边距都是 25px

auto 值

您可以将 margin 属性设置为 auto,以使元素在其容器中水平居中。然后,该元素将占据指定的宽度,并且剩余空间将在左右边界之间平均分配。

div {
  width:300px;
  margin: auto;/*由于 margin: auto;,这个 div 将水平居中。*/
  border: 1px solid red;
}

inherit 值

本例中元素的左外边距继承自父元素

p.ex1 {
  margin-left: inherit;/*本段落继承了 div 元素的左外边距。*/
}


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

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

本文链接:https://www.uuucd.cn/css/57.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控制颜色]

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 边框属性关键词:borderborder 属性允许您指定元素边框的颜色和宽度以及样式。CSS 边框样式关键词:border-style border-style 属性作用于指定显示的边框外观类型。可以设置一到四个值(用于上...

三剑客实战之Css入门基础知识[css内外边距和宽高设置]

三剑客实战之Css入门基础知识[css内外边距和宽高设置]

css外边距合并外边距合并:定义为当两个垂直外边距相遇时,将形成一个外边距。合并之后的外边距高度是等于两个发生合并的外边距高度中的较大者。外边距合并(叠加)在实践中对网页进行布局时,它会造成许多混淆。也是一个相对比较简单的概念。当一个元素出...

发表评论

访客

看不清,换一张

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