在网页制作中合理应用网页边框的样式属性

建企业网站的时候，会用到一些边框，无论是表格或是div，布局的时候边框可以做为一个分界线，让内容对比或衬托更加明显。边框的使用其实也很简单，一个是边框的粗细，另一个是边框的颜色。可以对局部整体设置，也可以单独设置上下左右四个方向的边框。在CSS中有一个关于颜色的属性：border-color，它一次可以接受最多4个颜色值。

border-color值：[<color>|transparent]{1,4} | inherit 初始值：对简写属性未定义计算值：单个属性（border-top-color，顶部边框颜色）

如果网页设计的边框值小于4个，值复制就会起作用。如果设计人员希望h1元素有细的黑色上下边框，而且有粗的灰色左右边框，在CSS样式中应该这样写:

h1{border-style:solid;border-width:thin thick;border-color:black gray;}

当然一个颜色值会应用到所有4个边，如果应用了4个颜色值，那么每边都会有不同的颜色。可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和RGB值：

p{
    border-style:solid;border-width:thick;
    border-color:black rgb(25%,25%,25%)#808080 silver;}

也可以使用简写的方式一次性定义多个边框，比如对某一个段落P进行设置：

P{
    border:#cecece 1px solid; //四个边框均为灰色1px
}

还有一些单边border-color属性。其原理与单边样式和宽度属性相同。网站建设人员要为标题指定一个实线黑色边框，而且右边框为实线灰色，可以如下指定：

P{border-style:solid;border-color:black;border-right-color:gray;}

边框四个方向对应的属性名称：

顶部border-top-color、右侧border-right-color、底部border-bottom-color、左侧border-left-color

透明边框的使用：
在有些情况下网页制作人员可能想创建一个不可见的边框。这就引人了边框颜色值transparent（在CSS2中引入）。这个值用于创建有宽度的不可见边框。假设你希望包含3个链接的一组链接有边框，默认地这些边框不可见，不过，鼠标停留在链接上时边框要凸起。为此可以让边框在链接处于非悬停状态下透明：

a:link, a:visited {
    border-style: solid; border-width: 5px; border-color: transparent;}
a:hover {border-color: gray;}

利用transparent，使用边框就像是额外的内边距一样，此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区（假设有可见的背景）。

警告：在IE7之前，IE/Win没有提供对transparent的支持。在以前的版本中，IE会根据元素的color值来设置边框颜色。

近在开发H5，ui稿给的border：1px solid,因为ui稿上的宽度是750px，我们运行的页面宽度是375px，所以我们需要把所有尺寸/2。所以我们可能会想写border：0.5px solid。但是实际上，我们看页面渲染，仍然是渲染1px而不是0.5

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: Arial, sans-serif;
      }

      .flex {
        display: flex;
      }
      .item {
        margin-right: 10px;
        padding: 10px;
        font-size: 13px;
        line-height: 1;
        background-color: rgba(242, 243, 245,1);
      }
      .active {
        color: rgba(250, 100, 0, 1);
        font-size: 14px;
        border: 0.5px solid ;
      }
    </style>
  </head>
  <body>
    <div class="flex">
      <!-- <div class="item active">
        active
      </div> -->
      <div class="item">
        item1
      </div>
      <div class="item">
        item2
      </div>
      <div class="item">
        item3
      </div>
    </div>
  </body>
</html>

在没active的情况下

他们的内容都是占13px

在有active的情况下

active占了14px这个是没问题的，因为它font-size是14px嘛，但是我们是设置了border的宽度是0.5px，但展现的却是1px。

再来看看item

它内容占了16px，它受到相邻元素影响是14px+2px的上下边框

为啥border是1px呢

在 CSS 中，边框可以设置为 0.5px，但在某些情况下，尤其是低分辨率的屏幕上，浏览器可能会将其渲染为 1px 或根本不显示。这是因为某些浏览器和显示设备不支持小于 1px 的边框宽度或不能准确渲染出这样的细小边框。

浏览器渲染机制

不同浏览器对于小数像素的处理方式不同。一些浏览器可能会将 0.5px 边框四舍五入为 1px，以确保在所有设备上的一致性。

设备像素比

在高 DPI（如 Retina 显示器）设备上，0.5px 边框可能看起来更清晰，因为这些设备可以渲染更细的边框。
在低 DPI 设备上，0.5px 边框可能会被放大或者根本不会被显示。

解决办法

方法一：使用伪类和定位

.active {
  color: rgba(250, 100, 0, 1);
  font-size: 14px;
  position: relative;
}
.active::after {
  content: "";
  pointer-events: none;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  border: 1px #ff892e solid;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

另外的item的内容高度也是14px了符合要求

方法二：使用阴影，使用F12看的时候感觉还是有些问题

.active2 {
  margin-left: 10px;
  color: rgba(250, 100, 0, 1);
  font-size: 14px;
  position: relative;
  box-shadow: 0 0 0 0.5px #ff892e;
}

方法三：使用svg，但这种自己设置了宽度。

<div class="active">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect x="0" y="0" width="100" height="100" fill="none" stroke="#ff892e" stroke-width="0.5"></rect>
  </svg>
  active
</div>

方案四：使用svg加定位，也比较麻烦，而且有其他的问题

<div class="active">
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
        <rect x="0" y="0" width="100" height="100" fill="none" stroke="#ff892e" stroke-width="0.5"></rect>
    </svg>
    <div class="content">active</div>
</div>

.active {
  color: rgba(250, 100, 0, 1);
  font-size: 14px;
  position: relative;
  display: inline-block; 
}
.active svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; 
  box-sizing: border-box;
}
.active .content {
  position: relative;
  z-index: 1; 
}

方法五：使用一个父元素比较麻烦

<div class="border-container">
  <div class="active">active</div>
</div>

.border-container {
  display: inline-block;
  padding: 0.5px; 
  background-color: #ff892e; 
}

.active {
  color: rgba(250, 100, 0, 1);
  font-size: 14px;
  background-color: white; 
}

最后

在公司里，我们使用的都是方案一，这样active和item它们的内容高度都是14px了。然后我们再给他们的父盒子加上 align-items: center。这样active的高度是14px，其他都是13px了。但是active的高度会比其他item的盒子高1px，具体看个人需求是否添加吧。

景样式

1.背景属性缩写

Background: 背景色背景图片背景平铺方式背景定位

例：body {

background-color:# EDEDED;

background-image:url(images/bg.png);

background-repeat:no-repeat;

background-position:50% 30px;

}

缩写后：

body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

尺寸样式

1.宽度

width : auto | length

例：

p { width:300px;} div { width:50%;}

2.高度

height : auto | length

例：

img { height:200px;}

div { height:100px;}

边框样式

1.边框线

例：div { width:300px; height:100px; border-style:solid; ｝

border-top-style 设置上边框线

border-bottom-style 设置下边框线

border-left-style 设置左边框线

border-right-style 设置右边框线

2.边框宽度

border-width : medium | thin | thick | length

例：

div { width:300px; height:100px; border-style:solid; border-width:1px; ｝

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

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

border-left-width 设置左边框宽度

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

3.边框颜色

border-color : color

例：div {

width:300px;

height:100px;

border-style:solid;

border-width:1px;

border-color:#FF0000;

}

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

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

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

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

4.边框样式缩写

border : border-width || border-style || border-color

例：div {

width:300px;

height:100px;

border-style:solid;

border-width:1px;

border-color:#FF0000;

}

缩写后：div {

width:300px;

height:100px;

border:1px solid #FF0000;

}

外边距

margin : auto | length

例：div { width:300px; height:100px; margin:10px;}

div { width:300px; height:100px; margin:0 auto;}

margin-top 设置上边的外边距

margin-bottom 设置下边的外边距

margin-left设置左边的外边距

margin-right设置右边的外边距

缩写型式：

margin: 上边距右边距下边距左边距

margin: 上下边距左右边距

margin: 上边距左右边距下边距

内边距

padding : length

例：

div { width:300px; height:100px; padding:10px;}

padding-top 设置上边的内边距

padding-bottom 设置下边的内边距

padding-left设置左边的内边距

padding-right设置右边的内边距

缩写型式：

padding: 上边距右边距下边距左边距

padding : 上下边距左右边距

padding : 上边距左右边距下边距

列表样式

1.项目符号

katakana | katakana-iroha | lower-latin | upper-latin

例：

ul { list-style-type:disc;}/*实心圆*/

ul { list-style-type:circle;}/*空心圆*/

ul { list-style-type:square;}/*实心方块*/

ul { list-style-type:none;}/*不显示项目符号*/

ol { list-style-type:decimal;}/*阿拉伯数字*/

ol { list-style-type:lower-roman;}/*小写罗马数字*/

ol { list-style-type:upper-alpha;}/*大写英文字母*/

2.自定义项目符号

list-style-image : none | url ( url )

例：

ul {list-style-image:url(images/arrow.gif)}

链接样式

1.链接没有被访问时的样式

a:link

例： a:link { color:#ff0000; }

2.链接被访问后的样式

a:visited

例： a:link { color:#0000ff; text-decoration:none; }

3.鼠标悬停在链接上的样式

a:hover

例： a:link { background-color:#ccc; }

4.鼠标点击链接时的样式

a:active

例：a:active { background-color:#ff0000;}

在线咨询

上一篇：推荐7个Vue 3的高颜值UI组件库
下一篇：Spring MVC入门示例

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

在网页制作中合理应用网页边框的样式属性

为啥border是1px呢

浏览器渲染机制

设备像素比

解决办法

方法一：使用伪类和定位

方法二：使用阴影，使用F12看的时候感觉还是有些问题

方法五：使用一个父元素 比较麻烦

最后

您的项目需求

方法五：使用一个父元素比较麻烦