CSS:不可思议的border属性
原文:Magic of CSS border property
译文:不可思议的CSS border属性
译者:dwqs
在CSS中,其border属性有非常多的规则。
对于一些事物,比如三角形或者其他的图像,我们仍然使用图片取代。可是如今就不须要了,我们能够用CSS形成一些基本图形。我分享了一些关于这方面的技巧。
1、正三角形:
.triangle_up{height:0px; width:0px;border-bottom:50px solid #006633;border-left:50px solid transparent;border-right:50px solid transparent; }
2、倒三角形:
.triangle_down{height:0px; width:0px;border-top:50px solid #006633;border-left:50px solid transparent;border-right:50px solid transparent; }
3、左三角形
.triangle_left{height:0px; width:0px;border-left:50px solid #006633;border-top:50px solid transparent;border-bottom:50px solid transparent;float:left; }
4、右三角形
.triangle_right{height:0px; width:0px; float:left;border-right:50px solid #006633;border-top:50px solid transparent;border-bottom:50px solid transparent; }
5、十字街效果
.crossSquare{height:0px; width:0px;border-right:50px solid blue;border-top:50px solid gray;border-bottom:50px solid red;border-left:50px solid yellow; }
1至5的demo演示(为了演示方便。对源码修改了一下):http://jsfiddle.net/rt8cjtwq/embedded/result/
6、方向箭头(突出效果,修改了源码)
CSS:
.triangle_left{height:0px; width:0px;border-left:50px solid #006633;border-top:50px solid transparent;border-bottom:50px solid transparent;/*float:left;*/ }.triangle_right {height:0px; width:0px; /*float:left;*/border-right:50px solid #006633;border-top:50px solid transparent;border-bottom:50px solid transparent; }
<divclass="arrow"><div class="triangle_right"></div><div class="arrowLine"></div> </div><div class="arrow"><div class="arrowLine"></div><div class="triangle_left"></div> </div>
.delociousLogo{height:100px; width:100px;}.topleft{height:0px; width:0px;border-top:50px solid #FFFFFF;border-right:0px solid #FFFFFF;border-bottom:0px solid #FFFFFF;border-left:50px solid #FFFFFF;float:left;}.topright{float:left;height:0px; width:0px;border-top:50px solid #0000CC;border-right:0px solid #0000CC;border-bottom:0px solid #0000CC;border-left:50px solid #0000CC;}.bottomleft{float:left;height:0px; width:0px;border-top:50px solid #000000;border-right:0px solid #000000;border-bottom:0px solid #000000;border-left:50px solid #000000;}.bottomright{float:left;height:0px; width:0px;border-top:50px solid #999999;border-right:0px solid #999999;border-bottom:0px solid #999999;border-left:50px solid #999999;}
<divclass="delociousLogo"><div class="topleft"></div><div class="topright"></div><div class="bottomleft"></div><div class="bottomright"></div> </div>
推荐文章:重温CSS:Border属性
下一篇:8个非常实用的PHP安全函数。你知道几个?
转载于:https://www.cnblogs.com/yxysuanfa/p/6972985.html
CSS:不可思议的border属性相关推荐
- border属性 php,使用CSS的border属性构建变形边框的方法总结
border是最常用的用来制作各种各样p边框的CSS属性,这里我们整理了使用CSS的border属性构建变形边框的方法总结,最主要的还是基于三角形的一些图形变换: border基础回顾border 顾 ...
- css边框(border)属性
border属性 代码如下: border:边框宽度 边框风格 边框颜色; 如:border:5px solid #555; 属性: (1)边框宽度: border-width:5px; (2)边框颜 ...
- 巧用CSS的Border属性
. 作者:冯永曜 来源:黄山村夫 制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助.我们先来认识一下"Border"(画边框),它是CSS的一个属性,用它可以 ...
- border属性 php,如何通过CSS的border属性为图片设置边框效果
如何为通过css为图片设置一个边框呢,HTML中是通过标记的border属性值,给图片添加边框的,css中是通过border属性,为图片设置各式各样的边框样式,border-style定义边框的样式, ...
- 巧用CSS的Border属性制作特效菜单
许多应用软件的主菜单都具有这样的效果,通常是暗色的,一旦鼠标移到菜单上,立即变明亮:鼠标不在菜单上时是平面的,一旦鼠标移到菜单上,菜单条立即变为立体,从而增强了菜单的效果.你是否也想使网页中的导航菜单 ...
- 巧用css的border属性完成对图片编辑功能的性能优化
一.需求场景: 最近闲来无事,boss提出了一个要求,研究相关代码并完成一个关于编辑图片功能的性能优化,该功能的主要界面展示如下: 通过了几分钟的短暂试用,发现就是一个简单的裁剪并保存用户选择并上传的 ...
- CSS属性详解——使用border属性设置边框
CSS 是一种用于网页布局控制的语言,其中 border 属性用于为网页元素设置边框样式.颜色和宽度等.在本文中,我们将深入介绍 border 属性的详细语法和使用方式,帮助您轻松掌握使用. bord ...
- CSS Border属性solid(实线)使用介绍
Border(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,可以给文本加边框,给导航菜单加分隔线,下面与大家分享个实例,感兴趣的朋友可以了解下 制作过 ...
- php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
最新文章
- 揭秘美国空军如何用AI技术提升“战斗力”
- python详细安装教程linux-python 在linux系统的安装教程
- C#计算两点间的距离
- Oracle 原理: 初步认识程序包
- 【蓝桥杯】历届试题 错误票据
- ubuntu中gedit文本编辑器找不到首选项
- java去掉的行_Java实现去掉每行的行号
- 自用shell命令搜集
- php显示jquery未定义,运行PHP脚本时,jQuery函数表示未定义
- Springboot毕设项目会议预约系统设计与实现3if68(java+VUE+Mybatis+Maven+Mysql)
- 打开QQ音乐检测不到声卡
- 音视频中的码率控制(CBR、VBR、CVBR、FIXQP)
- python爬虫之cookie
- webpack配置文件的抽离
- TensorFlow Serving Introduction
- 「牛市」的危险和川普的口罩|极客一周
- pdo连接mysql_php PDO连接mysql
- Spring系列——@lazy注解
- 最常用的开源游戏引擎
- 大文件传输软件-镭速——MAC版分享