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. 项目Alpha冲刺（团队2/10）

    项目Alpha冲刺(团队2/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...

  2. maya2015卸载/安装失败/如何彻底卸载清除干净maya2015注册表和文件的方法

    maya2015提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装maya2015失败提示maya2015安装未完成,某些产品无法安装,也有时候想重新安装maya ...

  3. Android退出所有Activity最优雅的方式

    关于退出所有Activity,目前网上比较流行的方式大概有以下几种: ① 使用ActivityManager的方式: ② 自定义一个Activity集合类的方式: ③ 通过发送广播的方式: ④ 通过杀 ...

  4. Java 中的 HttpServletRequest 和 HttpServletResponse 对象

    HttpServletRequest对象详解 javax.servlet.http.HttpServletRequest是SUN制定的Servlet规范,是一个接口.表示请求,“HTTP请求协议”的完 ...

  5. Java 代码需要使用转义符的地方

    1.正则表达式特殊字符 Java 代码中使用到正则表达式里的特殊字符需要使用转义符 \ 进行转义 . ? * + ! ^ $ [ ] ( ) \ 因为反斜线 \ 也是特殊字符,所以转义需双反斜线 \\ ...

  6. Java 数组的创建

    与C.C++不同,Java在定义数组时并不为数组元素分配内存,因此[ ]中无需指定数组元素的个数,即数组长度. 定义一个数组有两种方式: int[] array; int array[]; 对于如上定 ...

  7. 第九节：详细讲解Java中的泛型，多线程，网络编程

    前言 大家好,给大家带来详细讲解Java中的泛型,多线程,网络编程的概述,希望你们喜欢 泛型 泛型格式:ArrayList list= new ArrayList(); ArrayList list= ...

  8. Java匹马行天下之JavaSE核心技术——面向对象

    面向对象 注: 看此篇时强烈建议有一定的面向对象思想基础,有一定的基础后先翻到下面看第九条:      9.面向对象: 从未封装→封装→继承→多态→抽象类→接口的代码演变 按这个逻辑去看,,哪有不理解 ...

  9. spring boot、cloud v2.1.0.RELEASE 使用及技术整理

    2018年10月30日 springboot v2.1.0.RELEASE 发布: https://github.com/spring-projects/spring-boot/releases/ta ...

  10. MySQL：基础架构和工作流程

    [参考文章]:01|基础架构:一条查询语句的执行流程 1. 基本架构 大体来说,MySQL可以分为Server层和存储引擎两部分. Server层包括链接器,分析器,优化器,执行器等,涵盖大多数核心服 ...