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. 11.webview、shareSDK

    布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:la ...

  2. Java 实现删除文件工具类

    工具代码 package com.wangbo; import java.io.File; /** * 删除目录或文件工具类 * @author wangbo * @date 2017-04-11 1 ...

  3. 第二十九节：Java基础知识-类，多态，Object，数组和字符串

    前言 Java基础知识-类,多态,Object,数组和字符串,回顾,继承,类的多态性,多态,向上转型和向下转型,Object,数组,多维数组,字符串,字符串比较. 回顾 类的定义格式: [类的修饰符] ...

  4. 分布式任务调度系统xxl-job源码探究（二、服务中心）

    接下来看下服务端代码 服务端源码 服务端通过管理quartz定时任务组件,分发任务 先从入口看起,由web.xml进入,可以看出,自己编写的代码从applicationcontext-xxl-job- ...

  5. WIN10下Prolific USB-to-Serial Comm Port驱动

    最近在安装Prlific的时候,通过电脑自动安装启动后,发现系统无法识别,如下图所示: 还以为是驱动比较老,没有及时更新导致的,去官网下载最新的驱动,发现了这个列表: 这个驱动不支持win10. 后来 ...

  6. IOS 整体框架类图值得收藏

    Cocoa框架是iOS应用程序的基础,了解Cocoa框架,对开发iOS应用有很大的帮助. 1.Cocoa是什么? Cocoa是OS X和 iOS操作系统的程序的运行环境. 是什么因素使一个程序成为Co ...

  7. Python--DBUtil

    Python--DBUtil包 1 简介 DBUtils是一套Python数据库连接池包,并允许对非线程安全的数据库接口进行线程安全包装.DBUtils来自Webware for Python. DB ...

  8. 导入Excel文件

    选择文件 #region //获取路径 string FilePath = ""; //选择文件 OpenFileDialog openFileDialog1 = new Open ...

  9. Docker学习之4——构建NGINX镜像

    Nginx是一个高性能的Web和反向代理服务器,它具有很多非常优越的特性:1.作为Web服务器.2.作为负载均衡服务器.3.作为邮件代理服务器.4.安装及配置简单.接下来我们介绍在docker构建ng ...

  10. 基于Docker+Prometheus+Grafana监控SpringBoot健康信息

    在微服务体系当中,监控是必不可少的.当系统环境超过指定的阀值以后,需要提醒指定的运维人员或开发人员进行有效的防范,从而降低系统宕机的风险.在CNCF云计算平台中,Prometheus+Grafana是 ...