简单实用的css边框属性border

null1145 发布于2019-08-30 13:56 / 3406人阅读

摘要：本文主要讲述利用属性做出不同的几何形状从而适用于比较好看的视觉样式。任意组合就能组成不同的由三角形组成的其它几何形状了。

本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式。

预备知识

border相关属性

border-width 边框的宽度

border-style 边框的样式

border-color 边框的颜色

案例举例

为了更加通俗易懂，demo用的是最简单的dom元素和css属性


    商品介绍
    
    商品评价

.border{
    margin: 50px auto;
    width: 540px;
    font-size:18px;
    line-height: 40px;
    text-align: center;
}
.border-left{
    width: 260px;
    height: 40px;
    background: #f3941d;
    float: left;
    color: #fff;
}
.border-icon{
    width: 0px;
    height: 0;
    border-width: 40 20 0 0;
    border-style: solid;
    border-color: #f3941d #f5d7b7 #f3941d #f3941d;
    float: left;
}
.border-right{
    width: 260px;
    height: 40px;
    float: right;
    background: #f5d7b7;
    color: #aaa;
}

上面的css代码重点在于左边较深颜色与右边较浅颜色中间有一个三角形.border-icon


    
        
        介绍

.content{
    margin: 60px auto;
    width: 540px;
    height: auto;
    position: relative;
    border-top: 1px solid #ffffd;
}
.border{
    position: absolute;
    margin-top: -15px;
    margin-left: 20px;
}
.text{
    background: #e14340;
    height: 70px;
    width: 60px;
    line-height: 80px;
    color: #fff;
    text-align: center;
}
.small-triangle{
    position: absolute;
    width: 0;
    height: 0;
    border-width: 15px 10px 0px 0px;
    border-style: solid;
    border-color: #fff #c33a37 #ccc #ffffd;
    margin-left: -10px;
}
.big-triangle{
    width: 0;
    height: 0;
    border-width: 8px 30px;
    border-style: solid;
    border-color: #e14340 #e14340 #fff #e14340;
}

上面的css代码重点在于左边较深颜色的小三角.small-triangle和底部的三角.big-triangle

原理解析

那么border属性是如何变化出不同的几何形状呢？

.border1{
    width:0; 
    height:0; 
    border-width:20px 20px 20px 20px; 
    border-style:solid; 
    border-color:#aaa #bbb #ccc #ffffd;
}

看看上述样式产生的是一个什么样子的内容

我们通过border-width border-color可以任意变化每一条变的宽高，和颜色。
任意组合就能组成不同的由三角形组成的其它几何形状了。

更多内容可关注微信公众号：有一个姑娘在coding
好好学习，快乐编码

GPU云服务器云服务器 border属性边框属性 ubbcode简单实用 linux简单实用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115650.html

CSS实用技巧干货

摘要：一使用在菜单上应用取消应用边框我们通常的做法是先给每个菜单项设置边框，然后在设置最后一个菜单的边框为零不过不要这么做，使用伪类来达到同样的效果当然，你也可以使用或者，但是更加清晰，具有可读性二使用选择项目注第一个子元素的一、使用 :not() 在菜单上应用/取消应用边框我们通常的做法是先给每个菜单项设置边框，然后在设置最后一个菜单的边框为零 /* add border */...

tommego 2019-08-30 15:55 评论0 收藏0
CSS3学习笔记

摘要：在动画过程中，您能够多次改变这套样式。以百分比来规定改变发生的时间，或者通过关键词和，等价于和。为了获得最佳的浏览器支持，您应该始终定义和选择器。注释请使用动画属性来控制动画的外观，同时将动画与选择器绑定。CSS3 被划分为模块其中最重要的 CSS3 新增实用模块包括：背景和边框文本效果 2D/3D 转换动画多列布局用户界面 CSS3 边框: 　　用于创建圆角 border...

wenshi11019 2019-04-23 13:17 评论0 收藏0
浅谈CSS3 box-sizing 属性有趣的盒模型

摘要：盒模型的组成大家肯定都懂，由里向外盒模型是有两种标准的，一个是标准模型，一个是模型。指定元素的宽度和高度最小最大属性适用于的宽度和高度。盒模型的组成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有两种标准的，一个是标准模型，一个是IE模型。从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高，而在IE模型中盒模型...

K_B_Z 2019-04-23 11:41 评论0 收藏0
【译】22个必备的CSS小技巧

摘要：当它被选中时，一个设置在里的编码的字符将会显示出来。接着为我们的复选框添加一些动画效果这里是所有的编码，以及可以在这里进行体验。这是一个新的叫做的表达式。设置介于和之间的最大最小值。至今并未得到全面的支持。原文链接：22 Essential CSS Recipes更多译文将陆续推出，欢迎点赞+收藏+关注我的专栏，未完待续…… 大家好，今天我们将会介绍一些非常实用的CSS小技巧，让我...

Cristic 2019-08-29 10:56 评论0 收藏0