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 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

python数字图像处理(12):基本图形的绘制

skimage.draw.set_color(img, coords, color)

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

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

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

3236
来自专栏Golang语言社区

【Go 语言社区】HTML5 canvas验证码识别

canvas 的历史这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把...

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

【Java案例】打印五环

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

3485
来自专栏HTML5学堂

原生JS | 导航底部横线跟随鼠标缓动

HTML5学堂(码匠):在上周当中,我们用jQuery实现了 - 在导航底部存在一条横线,跟随着鼠标缓动到相应导航项 - 的特效,今天我们来讲讲原生JS的实现方...

5088
来自专栏数据结构与算法

Stirling数

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

32710
来自专栏前端知识分享

第100天:CSS3中animation动画详解

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

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

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

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

2237
来自专栏菜鸟计划

CSS基础语法(三) CSS的6种特性

样式表常用写法及特性(组合、继承、关联性、权值性、层叠性、重要性) 1.样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开。-例如:段落元素p、单元...

3354
来自专栏天天

框架设计续集(三)

973

扫码关注云+社区