三剑客实战之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 边框属性

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 元素的左外边距。*/
}

相關 软件应用