css border画图
css border属性竟然可以用来画图,今天项目中遇到该问题,借此有机会深入了解了下。
css border属性在我的印象当中只是方方正正的东西,无非就是增加边框的宽度,变换边框的颜色,因此一直以为边框不管怎么变换都是一个长方体,这个念头今天终于可以抛弃了。
先看下普通边框效果:
.border1{width:50px; height:50px; border:2px solid; border-color:#ff3300 #0000ff #339966 #00ff00;} <div class="border1"></div>
我们再将border的值增加到20px看看效果,惊喜出现了,发现竟然绘制出了4个梯形。
.border1{width:50px; height:50px; border:20px solid; border-color:#ff3300 #0000ff #339966 #00ff00;} <div class="border1"></div>
我们再将div的高度、宽度都设置为0,width:0;height:0;再看看效果。此时绘制出了4个等腰直角三角形。
.border1{width:0px; height:0px; border:20px solid; border-color:#ff3300 #0000ff #339966 #00ff00;} <div class="border1"></div>
我们再将左、右、下三个边框变为透明,border-color:#ff3300 transparent transparent transparent;
.border1{width:0px; height:0px; border:20px solid; border-color:#ff3300 transparent transparent transparent;} <div class="border1"></div>
成功绘制出一个三角形。哈哈。。。
利用边框绘图的原理就是这样,可以改变边框的宽度绘制不规则的形状。
下面是利用边框实现气泡对话框的例子:
<style> .box{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;} .box span{width:0;height:0;font-size:0;overflow:hidden;position:absolute;} .box span.bot{border-width:20px;border-style:solid dashed dashed;border-color:#beceeb transparent transparent; left:80px;bottom:-40px;} .box span.top{border-width:20px;border-style:solid dashed dashed;border-color:#ffffff transparent transparent; left:80px;bottom:-33px;} </style> <div class="box"><span class="bot"></span><span class="top"></span>css 边框法实现气泡对话框 </div>
效果图:
下面解决IE6问题:
IE6的空div高度bug:
IE6下,空div会有莫名的高度,也就是说“height: 0;”不顶用,此时形成的尖角的实际占高于其他浏览器是有差异的。可使用:
font-size: 0;
line-height: 0;
overflow: hidden;(来解决空的div会在ie6下有高度)
#test3 {
height: 0;
width: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color: #FF9600 transparent transparent;
border-style: solid;
border-width: 20px;
}
可是,IE6下不支持透明啊,会出现下图的样子:
找到一个在IE6下边框透明的文章中找到解决办法,设置余下三条边的border-style为dashed,即可达到透明的效果:
#test4 {
height: 0;
width: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color: #FF9600 transparent transparent;
border-style: solid dashed dashed;(这样的话在ie6下就透明了,想知道为啥吗???看下面的玄机,哈哈)
border-width: 20px;
}
当然,在IE6下,不设置透明,将其颜色设置为背景色,使其看不出来也是可以的。
- 透明:
IE6 浏览器不支持transparent透明属性,就border生成三角技术而言,直接设置对应的透明边框的border- style属性为dotted或是dashed即可解决这一问题,原因是在IE6下,点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上 (height>=border-width*3),虚线宽长度必须是其宽度的5倍以上(height>=border-width*5), 否则点线和虚线都不会出现。
转载于:https://www.cnblogs.com/JohnnyChen/archive/2012/11/29/2794361.html
css border画图相关推荐
- html正方形边框颜色,css边框颜色样式设置 css border颜色
DIV CSS边框颜色样式设置改变 css border边框样式可设置边框宽度.边框样式(css边框虚线.css边框实线).颜色样式.而css边框颜色只有设置边框宽度,设置边框颜色才能实现. 一.快速 ...
- 【CSS小练习】DIV+CSS布局画图
复杂的布局算是css中的一个难点,我做了一个画图小练习,分享代码如下: <!DOCTYPE html> <html lang="en"> <head& ...
- CSS Border属性solid(实线)使用介绍
Border(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,可以给文本加边框,给导航菜单加分隔线,下面与大家分享个实例,感兴趣的朋友可以了解下 制作过 ...
- css border制作小三角形状及应用(兼容IE6)
原理 css盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到 ...
- css border 虚线间距_一小时快速了解 CSS 基础
这一章,我们开始学习 CSS 样式表有关的知识点,通过 CSS 来控制 HTML 标签和元素的样式的方法和规范. 当然,结合视频观看效果更佳. CSS 和 HTML 不是同一种代码语言,所以自然语法书 ...
- css border 虚线间距_【前端冷知识】CSS如何实现虚线框动画
我们知道,CSS支持将元素的border属性设为虚线,例如: <h1>君喻学堂h1> h1 { border: dashed 1px; } 但是,CSS的虚线样式是固定的,如果我 ...
- CSS Border (边框)
CSS 边框 CSS 边框 (border) 可以是围绕元素内容和内边距的一条或多条线,对于这些线条,您可以自定义它们的样式.宽度以及颜色.使用 CSS 边框属性,我们可以创建出比 HTML 中更加优 ...
- css ---border边框语法
一.四个边框 border-left 设置左边框,一般单独设置左边框样式使用 border-right 设置右边框,一般单独设置右边框样式使用 border-top 设置上边框,一般单独设置上边框样式 ...
- web前端-CSS Border(边框)-011
边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义边框的样式 border-style 值: 边框宽度 您可以通过 border-width 属性为边框指定宽度. 为 ...
最新文章
- python调用spark和调用hive_Spark(Hive) SQL数据类型使用详解(Python)
- ActivityLifecycleCallbacks
- 在shell脚本中没有换行符的#39;echo#39;
- 如何用纯 CSS 创作小球变矩形背景的按钮悬停效果
- 计算机网络的DIX,《计算机网络》期末考试试卷(B卷)
- springboot之整合mybatis
- Python3 List sort(),sorted(),reverse()的使用及辨别
- Eterm连接不上-10001:登录失败
- pdf.js根据路径里传参数高亮显示关键字(跳转到对应页面)
- 世界上第一台计算机论文,世界上公认的第一台电子计算机是1946年诞生。.doc
- pyplot中文手册_matplotlib手册(1)-pyplot使用
- R语言 tidyverse 之数据处理:dplyr (中)
- centos下安装cutycapt
- 数学物理方法·基础篇-学习主要内容
- 操作系统中的IO控制方式详解
- 2009年国庆再回桂林(有图片)
- RedHat Enterprise Linux Server 6.4 迅雷快传 下载地址
- 智能仓储立库核心干货|立体化立体仓库类型是如何进行叉车和堆垛机配置?
- [Unity]Unity常见API
- yolo系列外文翻译_Yolo系列其二:Yolo_v2
热门文章
- 简书bug(已修复):网络不佳时安卓1.11.3呈现的空白页面如图
- 使用GDAL将下载的Google卫星图像转为带坐标的tif
- c语言程序设计 简述操作系统管理文件的方法,C语言程序设计基础实验.doc
- ArcGIS Maritime Server 开发教程(六)Maritime Service 开发技巧
- 微信公众号新浪百度云做服务器
- iOS应用内付费详解
- 使用DirectX9进行遮盖剔除
- hive常见的建表方式有哪些?各自的使用场景是?
- sparkwordcount
- python里面if语句一直出错_python错误,写了个小程序,if语句总是不执行,求高手指点...