CSS理解之border

border: 1px solid red;(border-width、border-style、border-color)

1.border-width不支持百分比

border-width你可以写成10px、10cm、10em、10pt,都有效果,但是你不能写成10%,类似的还有outlinebox-shadowtext-shadow等等。(补充:width、margin、padding都支持百分比)

border-width支持关键字:

  • thin:细的,1px;
  • medium(默认值) :中等的,3px;
  • thick:厚的,5px;

2.了解各种border-style类型

1.border-style: solid;实线 2.border-style: dashed; 虚线 3.border-style: dotted;点线

Paste_Image.png

4.border-style: double;双线

Paste_Image.png

由于它兼容性非常好,所以我们可以利用它进行一些布局,例如我们可以利用它绘制一些图形,我们可以通过border-style: double来实现常见的三条杠图标效果

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .example{
            width: 120px;
            height: 20px;
            border-top: 60px double;
            border-bottom: 20px solid;
        }
    </style>
</head>
<body>
    <div class="example"></div>
</body>
</html>

Paste_Image.png

3.border-color与color

一句话概括这两个css属性之间的关系那就是:border-color就是color,更准确的来讲就是border-color默认颜色就是color,当没有指定border-color的时候,会使用color作为边框色

4.border与background定位

background定位的局限:只能相对左上角数值定位,不能相对右下角。

5.border与三角等图形构建

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      div{
  width:100px;
  height:100px;
  border:100px solid;
  border-color:red green blue yellow;
}
    </style>
</head>
<body>
    <div class="example"></div>
</body>
</html>

Paste_Image.png

当把宽度变成0时:

div{
  width:0;
  height:100px;
  border:100px solid;
  border-color:red green blue yellow;
}

Paste_Image.png

当把高度变成0时:

div{
  width:100px;
  height:0;
  border:100px solid;
  border-color:red green blue yellow;
}

Paste_Image.png

当把宽高都变为0时:

div{
  width:0;
  height:0;
  border:100px solid;
  border-color:red green blue yellow;
}

Paste_Image.png

把左和下三角颜色变为透明,右三角变为红色:

div{
  width:0;
  height:0;
  border:100px solid;
  border-color:red red transparent transparent;
}

Paste_Image.png

三角的应用场景:

Paste_Image.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据结构与算法

Stirling数

第一类: 定义 第一类Stirling数表示表示将 n 个不同元素构成m个圆排列的数目。又根据正负性分为无符号第一类Stirling数 ? 和带符号第一类...

341100
来自专栏封碎

Android画图之Matrix(一) 博客分类: Android AndroidBlog

Matrix ,中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放、平移、旋转等操作。

10220
来自专栏编程坑太多

D3.js仪表盘的实现

62320
来自专栏前端知识分享

第100天:CSS3中animation动画详解

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;

22620
来自专栏天天

框架设计续集(三)

10730
来自专栏知晓程序

开发 | 「小游戏」开发难?不妨先从 2048 入手试试看

最近流行微信「跳一跳」小游戏,我也心血来潮写了一个微信小程序版 2048,本篇文章主要分享实现 2048 的算法以及注意的点,一起来学习吧!

15140
来自专栏小李刀刀的专栏

深入解析CSS样式层叠权重值

读到《重新认识CSS的权重》这篇,鬼哥在文章最后给出了便于记忆的顺序:“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪...

34360
来自专栏Java帮帮-微信公众号-技术文章全总结

【Java案例】打印五环

案例描述 在屏幕上画出奥运五环旗,如图1.7所示。 ? 图1.7 奥运五环旗 案例分析 观察奥运五环旗的图案,直观的感觉,由五个圆组成,每个圆的颜色不一样...

42750
来自专栏王金龙的专栏

svg.js教程及使用手册详解(二)

上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法。

41440
来自专栏菩提树下的杨过

Flash/Flex学习笔记(21):利用colorTransform改变对象的颜色及透明度

transform是flash.Display.DisplayObject的属性之一,而colorTransform又是transform的属性,这也就意味着几...

25070

扫码关注云+社区

领取腾讯云代金券