border-边框的形状

一、简述

　　浏览网页的时候，发现有些网页当中的箭头（三角形）是由border形成的，感到新奇。

二、内容

　　研究了一番后，首先普通的border用法是这样的

<div style=" border-width:2px; border-color:#F44336; border-style:solid; width:100px; height:100px; background-color:Black;">
</div>

　　如果把border-width放大10倍、border-color分别设置四个颜色，那么boder的四边就会各自变成不同颜色的梯形状

<div style=" border-width:20px; border-color:#F44336 #2196F3 #009688 #FFEB3B; border-style:solid; width:100px; height:100px; background-color:Black;">
</div>

　　然后把div的width与height都设置为0，那么border的四边就会各自变成不同颜色的三角形

<div style=" border-width:20px; border-color:#F44336 #2196F3 #009688 #FFEB3B; border-style:solid; width:0; height:0; background-color:Black;">
</div>

　　现在三角形（小箭头）已经出现了，接下来把上、右、下边还有background-color的颜色设置成transparent，就变成了一个三角形

<div style=" border-width:20px; border-color:transparent transparent transparent #FFEB3B; border-style:solid; width:0; height:0; background-color:transparent;">
</div>

　　又或者调整border四边的各自border-width，就会出现高度不一的三角形

<div style=" border-width:20px 30px 40px 50px; border-color: #F44336 #2196F3 #009688 #FFEB3B; border-style:solid; width:0; height:0; background-color:Black;">
</div>

　　最后利用这种技巧加absolute，就可以做出很巧妙的形状来替代一些简单的图片

转载于:https://www.cnblogs.com/kongbailingluangan/p/6443268.html

border-边框的形状相关推荐

css中border制作各种形状
css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...
继承性和层叠性权重盒模型 padding(内边距) border(边框) margin 标准文档流块级元素和行内元素...
内容总结: 1.继承性和层叠性继承性: 像一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...
如何给table表格的tr行加border边框（解决篇）
文章目录一.如何给table表格的tr行加border边框二.样式 bug - 截图示下三.解决办法: 四.关于属性 `border-collapse`的取值.解析一.如何给table表格的t ...
ie6中容器内浮动元素的border边框不完全显示的bug
ie6中容器内浮动元素的border边框不完全显示的bug html <div class="hrListBox"> <div class=&qu ...
11.CSS border边框
边框 border:边框的意思,描述盒子的边框边框有三个要素: 粗细线性样式颜色 border: solid 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样式,默认的有上下左 ...
Element-UI学习之旅-Border边框及图标
你能获得什么? 如何设置Border边框,如何使用icon图标,了解到Element-ui字体和颜色的知识 Border 边框我们对边框进行统一规范,可用于按钮.卡片.弹窗等组件里. border主 ...
html border线条重叠,关于border边框重叠颜色设置问题
盒子模型包括:margin border padding content 在标准盒子模型中 conten不包括border和padding 就是他自身内容所包含的区域. 在IE盒子模型中 co ...
html背景图片带边框,css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
elementUi中的el-select/el-input去掉border边框
在开发过程中遇到需要去掉 el-input的边框, 这是element ui 官方文档的样式而我们的需求是不可行做法 <div class="inputDemo"> ...
ie6浏览器下border边框线出现断裂问题解决方法
ie6浏览器下面经常会出现border边框断断续续的问题,在浏览器下刷新一下边框是全的,再以刷新边框就会有断开情况.其实他是有原因的,原因就是你的外层有边框,边框层里面嵌套的层里面有浮动,浮动这个最令 ...

border-边框的形状

一、简述

二、内容

border-边框的形状相关推荐

最新文章

热门文章