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. Django orm 实现批量插入数据

    Django ORM 中的批量操作 在Hibenate中,通过批量提交SQL操作,部分地实现了数据库的批量操作.但在Django的ORM中的批量操作却要完美得多,真是一个惊喜. 数据模型定义 首先,定 ...

  2. bootstrap fileinput 使用记录

    第一次使用bootstrap fileinput碰到了许多坑,做下记录 需求 本次使用bootstrap fileinput文件上传组件,主要用来上传和预览图片.作为一个后台管理功能,为某个表的某个字 ...

  3. Source Insight函数调用关系显示设置

    当我们需要设置source Insight的项目代码中函数调用关系时,可通过如下的设置来实现: 1.显示函数调用关系窗口 Source Insight工具栏中“View”—>“Relation  ...

  4. Maven 如何发布 jar 包到 Nexus 私库

    Nexus2可以通过管理界面来上传jar包到私库中,而最新的Nexus3却找不到了上传界面,只能通过以下方式来发布到私库. 发布第三方jar包 这种情况是maven远程仓库没有,本地有的第三方jar包 ...

  5. Java语言访问Redis数据库之Set篇

    如果想通过Java语言对Redis数据库进行访问. 首先,需要安装Redis数据库,可以是Windows系统,或者Linux系统.(本文以Windows系统的本地Redis数据库为例,代码说明如何操作 ...

  6. SignalR 中使用 MessagePack 序列化提高 WebSocket 通信性能

    It's like JSON.but fast and small. MessagePack is an efficient binary serialization format. It lets ...

  7. mysql 开发进阶篇系列 39 mysql日志之二进制日志(binlog)

    一.概述 二进制日志(binlog)记录了所有的DDL(数据定义语言)语句和DML(数据操纵语言)语句,但是不包括数据查询语句, 语句以"事件"的形式保存,它描述了数据的更改过程, ...

  8. 【Android】为需要支持API 11之前的Activity添加Action Bar的一种解决方案

    首先汗一个,题目打出来我就觉得像是在写论文…… 家里生了个娃,好久没有写东西了…… 做Android开发有一个很头疼的地方就是随着sdk的演进,很多新东西被加进来.但由于这样那样的限制, 不是所有的新 ...

  9. 全网最详细的IDEA、Eclipse和MyEclipse之间于Java web项目发布到Tomcat上运行成功的对比事宜【博主强烈推荐】【适合普通的还是Maven方式创建的】（图文详解）

    不多说,直接上干货! IDEA [适合公司业务]全网最详细的IDEA里如何正确新建[普通或者Maven]的Java web项目并发布到Tomcat上运行成功[博主强烈推荐](类似eclipse里同一个 ...

  10. 从零开始学 Web 之 HTML5（一）HTML5概述，语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...