css中我们经常使用到元素的border属性和属性值transparent，可能好多人还不太了解border的构成以及配合transparent的一些效果；

1.border的构成如下所示：

  html部分：
<body>
<h6>边框的构成</h6>
<div class="bodrShape1"></div>
<div class="bodrShape2"></div>
<div class="bodrShape3"></div>
</body>

css部分：

<style>
h4,div{
margin:0;
}
.bodrShape1,.bodrShape2,.bodrShape3{
border:10px solid transparent;
float:left;
margin:0px 5px;
}
1.1/*经常使用border属性如下*/
 .bodrShape3{
width:10px;
height:10px;
    border-color:red green blue black;
}

效果如图所示；http://images2015.cnblogs.com/blog/1159830/201705/1159830-20170507123427289-503405871.png

1.2/*边框的构成--将元素的宽，高设置为零，显示边框，可见边框的构成*/   

.bodrShape1{
width:0px;
height:0px;
border-color:red green blue black; 
}

效果如图，border是由4个三角形构成的。http://images2015.cnblogs.com/blog/1159830/201705/1159830-20170507123440773-1246158280.png

1.3/*配合transparent,将另外3个边隐藏，可以获取对应三角形状的边*/
.bodrShape2{
width:0px;
height:0px;
   border-left-color:black;
}

</style>

效果如图所示,可以制作各种三角形状；http://images2015.cnblogs.com/blog/1159830/201705/1159830-20170507123452664-1053704858.png

css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0的更多相关文章

  1. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...

  2. css中的border还可以这样玩

    在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人 ...

  3. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  4. css中的大小、定位、轮廓相关属性

    css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...

  5. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  6. 关于css中的border

    我一直以为css中的border是正方形的 像这样 因为我平时用的时候都是 border:1px solid #000,都是同一个颜色所以看不出来 当我给每一个边分别设置颜色的时候才发现 他们是以梯形 ...

  7. 深入理解之css中的border属性

    1. border-width:不支持不百分比 1)受本身的使用场景决定. 例子:左边为手机,右边为显示器,但是他们边框的宽度是差不多的,不会因为设备大就让边框宽度变大. 2. border-widt ...

  8. css中元素的auto属性值是什么意思，比如margin:0 auto表示什么？

    auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...

  9. CSS中设置border:none和border:0的区别

    在我们设置CSS的时候,对标签元素不设置边框属性或者取消边框属性一般设置为:border:none;或border:0;两种方法均可. border:none;与border:0;的区别体现有两点:一 ...

随机推荐

  1. win10 插入16k采样的耳机无法播放和录音的问题定位

    平时做智能耳机,需要经常在windows上测试不同采样率的声音信号.可是,最近在16k双声道输入的情况下, 无论系统都使用该耳机进行播放,该问题思索了好久,一直没有解决办法. 今天无意中使用了wind ...

  2. 深度学习python的配置（Windows）

    Windows下深度学习python的配置 1.安装包的下载 (1)anaconda (2)pycharm 2.安装教程 (1)anaconda a.降版本 b.换源 (2)pycharm a.修改h ...

  3. Liferay7 BPM门户开发之12:acitiviti和liferay用户权限体系集成

    写到第12章才出现Liferay的内容,希望可以厚积薄发. 我们的目标是不使用不维护Activiti的用户组织架构,只维护Liferay的体系,这样的好处是非常明显的,即不用做组织架构的同步工作. 原 ...

  4. 安装apache 后,找不到服务,解决办法

    在命令行进入安装apache的bin目录下,在输入命令:httpd.exe -k install -n Apache版本号 回车即可注意:要在管理员的身份下进入cmd (C:\Windows\SysW ...

  5. 利用history.pushState()实现页面无刷新更新

    本来是在研究vue-router如何记录滚动位置,点返回的时候还是回到原来的位置,看到有人说的history.state存了一个值,才把history研究一下,发现 history.pushState ...

  6. koa2搭建服务器

    首先初始化项目 npm init -y 安装koa2 npm install koa --save 项目根目录 新建 index.js //这是最基本的服务 const Koa = require(' ...

  7. js与jQuery操作select大全

    Js操作Select是很常见的,也是比较实用的,每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 一.js操作select部分 判断select选项中 是否存在V ...

  8. 干货 | 请收下这份2018学习清单：150个最好的机器学习，NLP和Python教程

    机器学习的发展可以追溯到1959年,有着丰富的历史.这个领域也正在以前所未有的速度进化.在之前的一篇文章中,我们讨论过为什么通用人工智能领域即将要爆发.有兴趣入坑ML的小伙伴不要拖延了,时不我待! 在 ...

  9. 【Spark笔记】Windows10 本地搭建单机版Spark开发环境

    0x00 环境及软件 1.系统环境 OS:Windows10_x64 专业版 2.所需软件或工具 JDK1.8.0_131 spark-2.3.0-bin-hadoop2.7.tgz hadoop-2 ...

  10. 三对角线性方程组(tridiagonal systems of equations)的求解

    三对角线性方程组(tridiagonal systems of equations)   三对角线性方程组,对于熟悉数值分析的同学来说,并不陌生,它经常出现在微分方程的数值求解和三次样条函数的插值问题 ...