正文

css中border的一些知识

ljw980706  2022-02-16  380

关键词：

在编写页面代码时，经常会用到元素的边框

括弧：border

给某个元素增加一个1px的实线黑色边框:

html代码部分1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/bootstrap/3.3.6/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.css">
    <link rel="stylesheet" href="css/text.css">
</head>
<body>
<p>使用border给元素增加一个像素的黑色实线边框</p>
<div class="css_2019_2_3_1 css_2019_2_3_2">元素2019_2_3_1</div>

css代码部分1

.css_2019_2_3_1{
     border:1px solid #000;
 }
.css_2019_2_3_2{
    height: 200px;
    width: 300px;
    margin: 20px;
}

　　效果图1：

但是如果四个方向的边框线颜色不同时是什么效果呢？

html代码部分2

<p>使用border给元素增加一个像素的 括弧：上红，右绿，下蓝，左黄的实线边框</p>
<div class="css_2019_2_3_3 css_2019_2_3_2">元素2019_2_3_2</div>

css代码部分2

.css_2019_2_3_3{
    border-top: 1px solid red;
    border-right: 1px solid green;
    border-bottom: 1px solid blue;
    border-left: 1px solid yellow;
}

效果图2:

看起来只是改变了各边的颜色而已，但是我们想知道在边框线的宽度特别大时，相邻的边框线是如何显示在屏幕上的呢?

html代码部分3

<p>使用border给元素增加50px的 括弧：上红，右绿，下蓝，左黄的实线边框</p>
<div class="css_2019_2_3_2 css_2019_2_3_4">元素2019_2_3_2</div>

css代码部分3

.css_2019_2_3_4{
    border-top: 50px solid red;
    border-right: 50px solid green;
    border-bottom: 50px solid blue;
    border-left: 50px solid yellow;
}

效果图3

可以看到相邻的边框各宽为水平边框，高为垂直边框的长方形根据对角线分成两个直角三角形的其中一个

那么我们看看如果边框的大小和元素的长宽相同时，会怎样

html代码部分4

<p>使用border给元素增加一个200px的红色实线边框和一个300px的绿色右边框</p>
<div class="css_2019_2_3_5 css_2019_2_3_6">元素2019_2_3_4</div>

css代码部分4

.css_2019_2_3_5{
    border-top: 200px solid red;
    border-right: 300px solid green;
}
.css_2019_2_3_6{
    height: 200px;
    width: 300px;
    margin: 100px;
}

效果图4：

由于元素在页面显示的计算规则可以看到元素内容被挤到下面，而元素的宽为300px,高为一个200px故形成一个300px*200px的矩形

两个边框各占矩形的非主对角线划分成的直角三角形的一半。

在来看个更特殊的情况括弧:

使用border给元素增加一个100px的红色实线边框，一个200px的绿色右边框，一个300px的蓝色边框和一个400px的黄色边框
html代码部分5

<p>使用border给元素增加一个100px的红色实线边框，一个200px的绿色右边框，一个300px的蓝色边框和一个400px的黄色边框</p>
<div class="css_2019_2_3_7 css_2019_2_3_8">元素2019_2_3_5</div>

css代码部分5

.css_2019_2_3_7{
    border-top: 100px solid red;
    border-right: 200px solid green;
    border-bottom: 300px solid blue;
    border-left: 400px solid yellow;
}
.css_2019_2_3_8{
    height: 400px;
    width: 600px;
    margin: 100px;
}

效果图5_1：

再来看看再火狐浏览器上控制对一些样式的显隐后的情况

最终发现某个方向的边框的形状受到其他相邻方向的边框的影响

总结：可以根据元素的边框间的相互作用实现css对一些图形的绘制,典型的就是booStrap中的caret样式,用作上下拉的菜单的按钮符号。

工作中常用的前端知识总结(代码片段)

1.使用css写出一个三角形角标元素宽高设置为0，通过border属性来设置，让其它三个方向的border颜色为透明或者和背景色保持一致，剩余一条border的颜色设置为需要的颜色。divwidth:0;height:0;border:5pxsolid#transparent;border-top-c... 查看详情

css知识点合集

...么不同？　　盒模型都是由四个部分组成，分别是margin，border，padding和content；　　W3C标准盒模型的属性width和height属性的范围只包括了content；　　IE盒模型属性width和height包含了conent，border和padding;　　在IE8浏览器中使用哪个盒... 查看详情

css基础知识点整理

...标准/IE盒子模型标准盒子模型：宽度=内容宽度（content）+border+padding+marginIE盒子模型：宽度=内容宽度（content+border+padding）+marginbox-sizing用来控制元素的盒子模型的解析模式。默认为con 查看详情

css基础知识点整理

css盒子模型的一些理解

...子模型的大小=“内容（content）+内填充（padding）+边框（border）+外边距（margin）”盒子模型方向为：top,bottom,left,right.border-style（边框样式）常见样式有：dashed（虚线）|dotted（点线）|solid（实线）。border-width（边框宽度）中的宽... 查看详情

前端基础知识---css

1.盒模型宽度计算答：IE浏览器默认盒模型为border-box，其他浏览器默认盒模型为content-box。元素的实际模型宽度和高度为offsetWidth和offsetHeight。border-box的offsetWidth=width，content-box的offsetWidth=width+padding+border。2.margin纵向重合问题答：... 查看详情

用css来写一些简单的图形

...的介绍几个例子：1.上三角TriangleUp#triangle-up{width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-bottom:100pxsolidred; 查看详情

通过css3实现圆形头像显示

...天分享的是利用CSS实现圆形头像，其实主要用的属性就是border-radius。方法一：直接将用一个div包裹img。代码如下：CSS设置如下，其重点就是设置border-radius圆角属性为为宽高的一半，然后要在包裹<i 查看详情

css绘图

1.自适应的椭圆背景知识：border-radius属性的基本用法使用border-radius制作一个圆很简单，只要给任何正方形元素设置固定宽高及一半长度以上的border-radius，就可以得到圆形1234background:#fb3;width:200px;height:200px;border-radius:100px;/*>=正... 查看详情

一些css新增的知识

1、CSS引用文件字体准备工作：将字体文件解压放于fonts文件夹中，字体文件通常有eot、svg、ttf、woff四种格式CSS声明字体引用：@font-face{font-family:test;src:url(‘../fonts/test.eot‘)format(‘embedded-opentype‘),url(‘../fonts/test.svg‘)format(‘svg... 查看详情

css3相关实用知识点

...体查询resize元素outline偏移其他的@规则使用边框边框圆角border-radius:10px;边框图片设置border:20pxsolidtransparent;border-image:url(./ 查看详情

css3中利用border-color制作三角形

...ss3的一些属性，发现一个以前并没有深入了解的一个属性border-color，，这个属性可以设置边框的四条边的颜色，代码如下：<style>div{width:0px;height:0px;border:60pxsolidred;border-color:greenpink;}</style></head><body><div& 查看详情

[css揭秘]连续的图像边框

背景知识：border-image,gradient, 多重背景，CSS动画背景知识讲解1.border-image边框应用背景图片，图片会自动被分割为四等分，分别用于四个边框。使用border-image属性时，会替换掉border-style属性设置的边框样式。如果boder-image-source... 查看详情

简单实用的css边框属性border

本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式。预备知识border相关属性border-width边框的宽度border-style边框的样式border-color边框的颜色案例举例为了更加通俗易懂，demo用的是最简单的dom元素和css... 查看详情

简单实用的css边框属性border

css面试题&知识点汇总

...；盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；区别：IE的content部分把border和padding计算了进去;参考资料前端开发面试题2019寒冬中的深圳前端面试分享(附笔试题)。Web前端常见面试题汇总结束语下多少种，收多少... 查看详情

css中border制作各种形状

css利用border制作各种形状的原理如图：使用border绘制三角形是什么原理？事实上，宽度相等的border是以45度对接的，如下图: 没有了上border如图所示：再设置border的宽度为0：设置border的高度为0：如图最后设置左右bord... 查看详情

10-[css]-盒模型：border，padding，margin

...模型。盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如图所示： <!--盒模型：在网页中基本上都会显示一些方方正正的盒子，这种盒子就被我们称为盒模型重要的... 查看详情