浅谈前端CSS中的一个硬核属性-border

前言

了解过前端的都知道，html 所有的标签都离不开border属性，Border,顾名思义，边框，给标签加个边框，就像我们生活中的窗户框子，Border除了可以设置标签的边框之外，还有很多隐藏的特殊功能，比如，可以'画'个图，可以达到和canvas一样的效果。

一、使用border画出一个太极八卦图

1.效果图如下

像这样的八卦图，除了可以使canvas画出来，我们强大的CSS的border属性也可以实现，在这里我们使用的是border的小儿子属性 border-radius ,该属性的作用的为元素添加圆角边框！

语法：border-radius: 1-4 length|% / 1-4 length|%;

border-radius:2px;

等价于：

border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;

按此顺序设置每个 radius的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

2.实现思路图解

3.废话不多说，直接上代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}.container{margin: 10% 10%;}.tj{width: 800px;height: 600px;}  .tj-left{float: left;width: 200px;height:400px;border: 1px solid #000000;box-sizing: border-box;border-radius:200px 0  0 200px ;border-left: 1px solid #fff;background-color: #F5F5F5;position: relative;}.tj-right{float: left;width: 200px;height: 400px;box-sizing: border-box;border:  1px solid #000000;border-radius:0 200px 200px 0;background-color: #000000;position: relative;border-left: none;}.left-big-top{width: 100px;height: 200px;background-color:#F5F5F5 ;position: absolute;left: 100px;border-radius: 100px 0 0 100px;}.right-big-top{width: 100px;height: 200px;background-color:#F5F5F5 ;position: absolute;border-radius: 0 100px 100px 0;}.left-small-top{width: 25px;height: 50px;background-color: #000000;position: absolute;left: 75px;top: 75px;z-index: 100;border-radius: 25px 0 0 25px;}.right-small-top{width: 25px;height: 50px;background-color: #000000;position: absolute;top:75px;z-index: 101;border-radius: 0 25px 25px 0;}.left-big-bottom{width: 100px;height: 200px;background-color:#000000 ;position: absolute;left: 100px;top:200px;border-radius: 100px 0 0 100px;}.right-big-bottom{width: 100px;height: 200px;background-color:#000000 ;position: absolute;border-radius: 0 100px 100px 0;top: 200px;}.left-small-bottom{position: absolute;width: 25px;height: 50px;background-color: #F5F5F5 ;left: 75px;top: 75px;z-index: 100;border-radius: 25px 0 0 25px;}.right-small-bottom{width: 25px;height: 50px;background-color: #F5F5F5;position: absolute;top:75px;z-index: 101;border-radius: 0 25px 25px 0;}</style></head><body><div class="container"><div class="tj"><div class="tj-left"><div class="left-big-top"><div class="left-small-top"></div></div><div class="left-big-bottom"><div class="left-small-bottom"></div></div></div><div class="tj-right"><div class="right-big-top"><div class="right-small-top"></div></div><div class="right-big-bottom"><div class="right-small-bottom"></div></div></div></div></div></body>
</html>

二、使用border 画一个三角形

1.效果图如下

实现这种效果我们使用了border的属性，我们先来补充一下能量

看下border 的属性

语法:

border-width ；边框宽度

border-color:边框颜色

border-style:边框样式（dotted 点状 solid 实线 double 双线 dashed虚线）

border-width:2px;

等价于

 border-left-width:2px;border-right-width:2px;border-bottom-width:2px;border-top-width:2px;

border-color 和border-style 也同border-width 类同,在这里就不粘代码了

2.实现思路图解

3.名人不说暗话，只打暗码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}.container{margin: 200px 200px auto;}.sjx{width: 0px;height: 0px;border-top-color: transparent;border-top-width:200px;border-top-style: solid;border-left-color: transparent;border-left-width:200px;border-left-style: solid;border-right-color: transparent;border-right-width:200px;border-right-style: solid;border-bottom-color: chocolate;/*transparent透明色*/border-bottom-width:200px;border-bottom-style: solid;}</style></head><body><div class="container"><div class="sjx"></div></div></body>
</html>

三、举一反三，实践出真梨

有的小朋友就问了，你搞个三角形，也没啥用处呀，下面我就用三角形来给大家介绍一个小小的应用的呆猫，先上图，看下效果，然后低头或举头沉思上三五千秒。

1.实现思路图解

2.实现此呆猫，需要补充点硬货

（1）解决三角形位移问题，旋转问题,目的是让我们的三角形能给头像戴个小帽子，我们需要补充一些小知识

transform: translateY(20px) translateX(2px) rotateZ(45deg) ;

此属性用来旋转和实现位移，

rotateZ(angle):沿着 Z 轴的 3D 旋转多少度，括号里面要写度数，一定要带单位deg

translateY(y)：沿着y轴移动,括号里的数字要大于0时,div整个层往下走（移动）,括号里的值小于0为负数时,div整个层往上走（移动）

translateX(x)：沿着X轴移动,括号里的数字要大于0时,div整个层往右走（移动）,括号里的值小于0为负数时,div整个层往左走（移动）

（2）星级的实现方法

例如：最高星级5颗星，我们选择一个横向排列5颗星星的透明背景图，通过控制这个背景图显示的宽度，来选择几颗星，当然这就要求我们在选择背景图的时候，每颗星星的间距保持一致，为实现这一效果，我们需要使用img的常见属性background 的小女儿属性，background:url() left top;

background:url() left top;

url() 引用背景图,

left 距背景图左边的距离 top 距背景图顶部的距离，通过 left 和 top 的定位来确定选择的显示背景图中的部分图片

3.客官，上代码啦

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}.container{margin: 150px 150px auto;}.container .info{margin: 0 auto;width: 200px;background-color: #fbfbfd;position: relative;}.sjx{border-style: solid;border-width: 50px 50px 50px 50px;border-color: #5946b2 #5946b2 transparent transparent;width: 0px;height: 0px;position: absolute;left: 100px;  }.info .title{color: #fff;transform: translateY(20px) translateX(2px) rotateZ(45deg) ;font-size: 16px;font-weight: 700;position: absolute;left: 150px;}.sjx .sjx-content{padding: 40px 10px auto;}.sjx-content .sjx-avtar{padding-top: 40px;text-align: center;}.sjx-content .sjx-avtar img{width: 100px;height: 100px;border: 5px solid #c7c1c1;}.sjx-content span{display: block;text-align: center;margin-top: 3%;padding-bottom: 10px;}.sjx-content .name{color: #2d64b3;}.jb-img{width: 30%;height: 20px;background:url(img/pfss.png) 0 -60px;margin-left: 35%;}</style></head><body><div class="container"><div class="info"><div class="sjx"></div><div class="title">好人</div><div class="sjx-content"><div class="sjx-avtar"><img src="img/avtar.jpg" /></div><span class="name">我是个好人</span><div class="jb-img"></div><span>三级级大神</span></div></div>              </div></div></body>
</html>

总结

万变不离其根，html中大部分的元素都会使用到border属性，基础中的基础，今天给大家介绍的是怎样使用border和border强大的画图功能，当然border还有其他的神奇的功能，在此由于时间有限，就靠小朋友们耐心去探索发现啦，此外细心的小朋友们，仔细阅读代码后会发现，在代码中还使用了霸王般的功能，三角巾是怎样戴到头像上？想知道其中的原由，且等下篇分解.......

前端CSS实现八卦图，三角形相关推荐

html css 八卦图,CSS动画-八卦图
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 Document #in>div{ width:150px; height:80px; border:1pxsolid #ddd; position ...
html5 css3画八卦图,CSS动画-八卦图
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 Document #in>div{ width:150px; height:80px; border:1pxsolid #ddd; position ...
前端css解决背景图、图片自适应的问题【通用】
剑阁峥嵘而崔嵬,一夫当关,万夫莫开 –‰
CSS制作太极八卦图及衍生物
CSS是网页设计师和前端人员需要了解和学习的一门语言,特别是现在很多网页使用扁平化设计,这类设计风格大部分布局.交互动画甚至是图标都会使用高级点的CSS3技能,所以我们应该熟练掌握CSS这门样式语言. ...
html5制作八卦图,使用HTML+CSS画太极八卦图
使用HTML+CSS画太极八卦图基本语法 CSS基本语法格式: 选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......} 选择符: 1.元素选择器:找到同名一系列 2.类选择器: ...
python画太极八卦图_「太极八卦图」使用HTML+CSS画太极八卦图 - seo实验室
太极八卦图使用HTML+CSS画太极八卦图基本语法 CSS基本语法格式:选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......} 选择符:1.元素选择器:找到同名一系列 2.类 ...
使用HTML+CSS画太极八卦图
使用HTML+CSS画太极八卦图基本语法 CSS基本语法格式: 选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3;......} 选择符: 1.元素选择器:找到同名一系列 2.类选择器: ...
用CSS伪类制作一个不断旋转的八卦图？
前言介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图代码如下: HTML部分 <!DOCTYPE html> <html> <head>& ...
html简单网页代码案例_HTML+CSS静态网页练习案例（转动的八卦图）
需要的知识 1.div标签的运用 2.id选择器,后代选择器, 3.简单的css样式长,宽,高,背景颜色,浮动,绝对定位,边框弧度 4.div的布局特点静态的完成效果动态效果(点击链接观看) 太极 ...

前端CSS实现八卦图，三角形

浅谈前端CSS中的一个硬核属性-border

前言

一、使用border画出一个太极八卦图

1.效果图如下

2.实现思路图解

3.废话不多说，直接上代码

二、使用border 画一个三角形

1.效果图如下

2.实现思路图解

3.名人不说暗话，只打暗码

三、举一反三，实践出真梨

1.实现思路图解

2.实现此呆猫，需要补充点硬货

3.客官，上代码啦

总结

前端CSS实现八卦图，三角形相关推荐

最新文章

热门文章