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的专栏

overflow:hidden属性

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。

561
来自专栏前端知识分享

第181天:HTML5——视频、音频

751
来自专栏十月梦想

移动端适配之viewport适配

前面说过了比例缩放适配,本来想直接介绍rem适配!还是补充一下这个viewport适配吧!其实这个viewport也归属于比例缩放适配的一种吧!

951
来自专栏HTML5学堂

img中alt与title辨析

HTML5学堂:img中alt与title有何不同?本文主要从表现在含义、浏览器中的表现以及对于网站seo优化程度三个方面进行辨析,接下来我们一起来看看。 示例...

2223
来自专栏静晴轩

CSS征途之Background点滴

CSS虽算不上编程语言,确是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控...

3224
来自专栏河湾欢儿的专栏

css3文本、盒模型阴影、倒影、自由缩放

css3新增盒模型阴影 box-shadow:[inset] x y blur [spread] color 参数 inset:投影方式 inset:内...

711
来自专栏每日一篇技术文章

weex-07-通用布局

weex 常用的两种布局 分别为 flex弹性布局 和 绝对定位布局 一般情况下都是这两种配合使用!

661
来自专栏Java Edge

CSS 全解析实战(二)-HTML基础强化1 HTML常见元素和理解(1)2 HTML常见元素和理解(2)3 HTML常见元素和理解(3)4 HTML版本5 元素分类6 嵌套关系

551
来自专栏Android小菜鸡

HTML JS DOM

  当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。

732
来自专栏cnblogs

Css3新特性应用之视觉效果

一、单侧阴影 box-shadow属性的应用,格式:h-shadow v-shadow blur spread color inset属性取值介绍 h-sah...

1759

扫码关注云+社区