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. Jira/Confluence的备份、恢复和迁移

    之前的文章已经分别详细介绍了Jira.Confluence的安装及二者账号对接的操作方法,下面简单说下二者的备份.恢复和迁移: 一.Jira.Confluence的备份.恢复1)Confluence的 ...

  2. 一篇入门 -- Scala

    整体介绍 Scala 是一门多范式(multi-paradigm)的编程语言,设计初衷是要集成面向对象编程和函数式编程的各种特性. 联邦理工学院洛桑(EPFL)的Martin Odersky于2001 ...

  3. 关于文件命名，你必须要知道的（浏览器报错：net::ERR_BLOCKED_BY_CLIENT）

    坑爹的,今天在写完页面,用各个浏览器测试的时候,火狐.谷歌都是正常的,QQ浏览器出幺蛾子了,在使用兼容模式的时候页面正常,使用急速模式的时候部分页面正常,点击跳转到其他页面的时候就出错了,打开控制台一 ...

  4. Spring Boot 配置随机数技巧

    Spring Boot支持在系统加载的时候配置随机数. 添加config/random.properties文件,添加以下内容: #随机32位MD5字符串 user.random.secret=${r ...

  5. iOS-Xcode解决【workspace integrity couldn't load project'】

    出现如标题提示的项目打不开情况,多半可能是因为Xcode版本不同,或者是SVN/Git使用导致 解决办法一: 删除冲突代码,"项目文件->Pod文件夹->Pods.xcodepr ...

  6. Python——pytessercat识别简单的验证码

    什么是验证码 验证码(CAPTCHA)是“Completely Automated Public Turing test to tell Computersand Humans Apart” (全自动 ...

  7. RobotFramework测试问题二：各种元素不能定位问题

    各种元素不能定位问题 一.元素定位 A. Click Element + xpath B. Click Element + contains C. Execute Javascript + getEl ...

  8. 解决vue路由history模式刷新后404的问题

    server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打 ...

  9. GO入门——7. 并发

    1 并发 1.1 goroutine Goroutine 奉行通过通信来共享内存,而不是共享内存来通信 goroutine 只是由官方实现的超级"线程池"而已. 每个实例 4-5K ...

  10. SQL 必知必会·笔记<17>使用存储过程

    存储过程就是为以后使用而保存的一条或多条SQL 语句.可将其视为批文件,虽然它们的作用不仅限于批处理. 1. 存储过程的优点和缺点 存储过程的优点: 使用存储过程有三个主要的好处,即简单.安全.高性能 ...