CSS解读之border属性的其他用途

最新推荐文章于 2024-05-08 00:51:20 发布

笔心

最新推荐文章于 2024-05-08 00:51:20 发布

阅读量1.1k

点赞数 1

分类专栏： CSS 文章标签： css border 三角形 tip 兼容

本文链接：https://blog.csdn.net/qinshenxue/article/details/17708421

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上一期主要就border属性“不为人知”的一面做了一下解读，其实也谈不上什么解读，对我个人来讲，可能就是一个纠错的过程。分享出来，我想对于那些还不知道的人应该会有些许的帮助。

我们现在已经理解了border属性的渲染方式，那么对此我们能有哪些不一般的用途了。

如图1-1所示，这个是实际border属性渲染的效果。

图1-1

如果我们将内容区的大小（即容器的大小）设为0的话，那么可以得到如图1-2的效果。

图1-2

当我第一眼看到图1-2的效果的时候，我觉得有很多地方可以用的上了，我们都知道，以前在HTML中想做一个多边形，一般都要引入图片才行，而图1-2稍加改动不就能够得到一个三角形，如图1-3，图1-1也可以做一些根据实际情况做一些改动，得到一个梯形如图1-4。

图1-3

图1-3代码如下：

<style type="text/css">
        div {
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-right: 50px solid #888;
            border-bottom: 50px solidtransparent;
            border-left: 50px solidtransparent;
        }
</style>

图1-4

图1-4代码如下：

<styletype="text/css">
        div {
            width: 50px;
            height: 50px;
            background: transparent;
            border-top: 50px solid transparent;
            border-right: 50px solidtransparent;
            border-bottom: 50px solid #ddd;
            border-left: 50px solidtransparent;
        }
</style>

真正运用还要结合实际需求，但是有了一些基本的认识之后，至少在设计的时候就知道该派谁上场了。图1-5和图1-6分别是实际场景中的一些简单的运用。

图1-5

图1-6

附：

图1-5源码

<!DOCTYPEhtml>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
 
    <style type="text/css">
        div#title {
            width: 500px;
            line-height: 50px;
            margin: 0 auto;
            background: #dddddd;
            text-align: center;
        }
 
        div#trapezoid {
            width: 100px;
            margin: 0 auto;
            border-top: 10px solid #DDD;
            border-right: 10px solid rgba(0, 0,0, 0);
            border-bottom: 10px solid rgba(0,0, 0, 0);
            border-left: 10px solid rgba(0, 0,0, 0);
        }
 
 
    </style>
</head>
<body>
<divid="title">标题</div>
<div id="trapezoid"></div>
</body>
</html>

图1-6实现代码

<!DOCTYPEhtml>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div#tip {
            width: 100px;
            height: 100px;
            padding: 5px;
            background: #dddddd;
            position: relative;
        }
        div#content {
            width: 100px;
            height: 100px;
        }
        div#triangle {
            position: relative;
            left: -25px;
            top: -94px;
            height: 0;
            width: 0;
            border-top: 10px solid transparent;
            border-right: 10px solid #dddddd;
            border-bottom: 10px solidtransparent;
            border-left: 10px solidtransparent;
        }
    </style>
</head>
<body>
<divid="tip">
    <div id="content">
        这里是TIP内容
    </div>
    <divid="triangle"></div>
</div>
</body>
</html>

笔心

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS解读之border属性的其他用途

上一期主要就border属性“不为人知”的一面做了一下解读，其实也谈不上什么解读，对我个人来讲，可能就是一个纠错的过程。分享出来，我想对于那些还不知道的人应该会有些许的帮助。我们现在已经理解了border属性的渲染方式，那么对此我们能有哪些不一般的用途了。如图1-1所示，这个是实际border属性渲染的效果。图1-1如果我们将内容区的大小（即容器的大小）设为0的话，那么可以
复制链接

扫一扫