css 外边框-什么是网页设计技术【基于DIV+CSS的网页设计技术】

bendan520 2023年8月21日 css 0

摘要：本文首先介绍了DIV和CSS技术的特点，然后分析了CSS包模型，最后通过具体实例讲解了DIV+CSS网页布局技术的方法和实现过程。 实例表明，该技术具有代码简单、性能与内容分离等优点。

关键词：DIVCSS 网页设计

0 序言

HTML[1]（HyperTextMark-upLanguage），即超文本标记语言，是互联网上使用最广泛的语言，也是撰写网页文档的基本语言。 HTML主要包括两部分：head和body。 后面描述了浏览器需要的信息，正文包含了需要解释的具体内容。 在一般的网页设计中，我们需要设计的内容都体现在主体中。

边框外粗内细怎么设置_边框外框线和内框线怎么设置_css 外边框

DIV 元素用于提供在 HTML 文档中布置大块内容的结构和背景。 它是HTML中的一个标签css 外边框，这个标签的作用是定位网页内容中的图片、文本、视频等相关信息。 通常我们也称其为DIV层的定位。 CSS（cascading stylesheet），层叠样式表，是一种用于控制网页样式并允许样式信息与网页分离的标记语言。 CSS 最初于 1996 年获得 W3C 批准，但推荐使用。 CSS的引入是为了让HTML语言更好的适应页面的美术设计。 它基于 HTML 语言，提供丰富的低级功能，例如字体、颜色、背景和整体布局，但网页设计人员可以针对各种可视化浏览器（包括显示器、打印机、打字机、投影仪和 PDA） ) 设置不同的样式。 CSS的引入，掀起了网页设计的一个又一个新高潮。 使用 CSS 设计的优秀页面层出不穷。

1CSS包模型[2]

css 外边框_边框外框线和内框线怎么设置_边框外粗内细怎么设置

bag模型是CSS控制页面时一个非常重要的概念。 只有掌握好包的模型以及里面每个元素的用法，才能真正掌控页面中的每个元素。

页面中的所有元素都可以看作是包，占据页面上一定的空间。 一般来说，占用的空间往往大于纯内容。 也就是说，可以通过调整包的边界、距离等参数来调整包的位置和大小。 一个页面是由很多这样的包组成的，它们之间会互相影响，所以把握包的模型需要从两个方面来理解。 一是了解孤立包的内部结构，二是了解多个包之间的相互关系。

CSS中，一个独立的bag模型由4部分组成：内容内容、边框边框、padding内行距和margin外距。 如图1所示。

图1 袋子模型

css 外边框_边框外粗内细怎么设置_边框外框线和内框线怎么设置

袋子的实际长度或高度由内容+内线间距+边框+外边框组成。 在css中，你可以通过设置width和height的值来控制内容所占据的圆的大小，但是对于任何一个bag，你都可以分别设置四个边的border、padding和margin。 因此css 外边框，只要利用好这些属性，就足以实现各种排版效果。

2DIV+CSS的基本设计

边框外粗内细怎么设置_边框外框线和内框线怎么设置_css 外边框

如果采用DIV和CSS网页布局结构，首先需要使用DIV来划分块并定义语义结构； 然后使用CSS定位并添加样式，如浮动、位置、对齐属性、添加背景等； 在块中添加相应的样式，如文本、图片等。下面以最常用的三栏自适应间距布局为例，介绍使用DIV+CSS布局网页的基本技巧。

使用标签将网页划分为不同的块，包括页眉、内容（包括侧边栏区域和主体区域）、页脚三个区域，分别作为网页的颈部、内容和版权区域。 编译HTML文档代码如下：

背部

侧边栏

主要内容

最近的一个项目有一个设计图如下

需要给列表添加标签和连接，有点类似于货运信息图。 实现思路是对2、3、4添加完整的左边框，对1、5添加一半的左边框。完整的左边框说起来容易，只能用border-left来实现，而如何实现一半边框？ 首先想到的是使用边框渐变或者伪类来实现。

1. 边框渐变

首先我们看一下border-image的相关属性值​​​​

css外边框_边框外粗内细怎么设置_边框外框线和内框线怎么设置

/*正式语法*/
border-image：||
||
||
 ]||

/* 默认值为 none 100% 1 0 stretch*/

border-image-source——资源图片地址（默认为无）css外边框，这个位置可以用渐变色代替，这个渐变色正是我们这次需要用到的。 border-image-slice——边界切片，将整个区域定义为9个切片，如右图所示。 请注意，top/bottom/left/right 值的总和通常不能超过元素的高度/宽度。

border-image-width——边框长度，该值不会改变实际边框长度css外边框，但会改变显示的长度。

css外边框_边框外框线和内框线怎么设置_边框外粗内细怎么设置

border-image-outset——边框图像区域超出边框的量，可以理解为向外偏转的量。

border-image-repeat—边界图像传播方法（重复、圆角、拉伸）。

根据MDN中对border-image的描述，我们有两点需要注意： 1、使用border-image时，会替换border-style属性设置的边框样式； 2. 当规范要求使用 border-image 样式时必须存在（有些浏览器没有实现这一点）。 由此我们可以看出，即使使用了border-image，border-style也会被覆盖，我们仍然需要声明border-style。 了解了以上知识后，我们就不多说了，直接上路吧！ 上面的代码：






/*css 代码*/
   .box {
        height: 200px;
        width: 200px;
        border-left: 5px dashed;
        background-color: skyblue;
        border-image: -webkit-linear-gradient(
            top,
            transparent 50%,
            green 50%,
            green 100%
          )
          1;
      }

得到如右图所示的疗效。

不难发现，这个边框其实是一半，而且是一条虚线，不符合我们的设计，所以需要改成实线，而且根据文档，我们没有地方可以调整，此方法无效。 而且我不放弃，难道真的不能用渐变吗？ 在网上搜索了很久，终于找到了另一种实现方式——反向镂空（具体可以参考张新旭的博客）。

边框外粗内细怎么设置_边框外框线和内框线怎么设置_css外边框


    

      

    



/*css 代码*/
     .box {
        width: 150px;
        border-left: 5px dashed skyblue;
        background: linear-gradient(
          to bottom,
          transparent 50%,
          green 50%,
          green
        );
        background-origin: border-box;
      }
      .content {
        height: 100px;
        background-color: skyblue;
      }

从效果上不难看出，该方法通过.box背景渐变实现了边框渐变的效果，同时保留了边框的实线特征。 使用上述方法时有两点需要注意。 .box的边框颜色必须与.content的背景颜色一致，.box渐变上部的颜色必须与.content的背景颜色一致。

边框外粗内细怎么设置_css外边框_边框外框线和内框线怎么设置

2. 伪类

使用伪类就简单多了，直接看代码即可


    

      

    



/*css 代码*/
    .box {
        height: 200px;
        width: 200px;
        background-color: skyblue;
        position: relative;
      }
      .box:after {
        content: "";
        position: absolute;
        height: 50%;
        border-left: 5px dashed green;
        top: 50%;
      }

疗效如下：