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

相关文章

来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2665
来自专栏落花落雨不落叶

canvas画简单电路图

63111
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6948
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2587
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

3879
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

31810
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2576
来自专栏魂祭心

原 canvas绘制clock

4164
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4045

扫码关注云+社区