制作不同方向的三角形（border属性）

border属性详解：

border：10px solid red；

border-width:10px;
border-style:solid;
border-color:red;

1、线性：solid（实线）dashed（虚线） dotted（点状线）doubble（双线）none/0（没有边框）

2、单一一个方向添加边框：border-right： 10px solid red；
border-left/right/top/bottom

3、边框设置方法：
border：solid-red；
border-width：
一个值：四周
俩个值：上下左右
三个值：上左右下
四个值：顺时针设置，上右下左

4：transparent：代替颜色值为透明

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文本属性</title><style type="text/css">body{text-align: center;}#box{display: inline-block;width: 0;height: 0;margin-left: 100px;border-left: 100px solid red;border-top: 100px solid transparent;border-bottom: 100px solid transparent;}#box1{display: inline-block;width: 0;height: 0;margin-left: 100px;border-top: 100px solid red;border-left: 100px solid transparent;border-right: 100px solid transparent;}#box2{display: inline-block;width: 0;height: 0;margin-left: 100px;border-right: 100px solid red;border-top: 100px solid transparent;border-bottom: 100px solid transparent;}#box3{display: inline-block;width: 0;height: 0;margin-left: 100px;border-bottom: 100px solid red;border-left: 100px solid transparent;border-right: 100px solid transparent;}</style></head><body><div id="box"></div><div id="box1"></div><div id="box2"></div><div id="box3"></div></body>
</html>

制作不同方向的三角形（border属性）相关推荐

CSS：不可思议的border属性
原文:Magic of CSS border property 译文:不可思议的CSS border属性译者:dwqs 在CSS中,其border属性有非常多的规则. 对于一些事物,比如三角形或者其 ...
border属性 php,使用CSS的border属性构建变形边框的方法总结
border是最常用的用来制作各种各样p边框的CSS属性,这里我们整理了使用CSS的border属性构建变形边框的方法总结,最主要的还是基于三角形的一些图形变换: border基础回顾border 顾 ...
CSS3之border属性
border相关属性需要大量练习,方可运用自如! 文字下方有Demo!!! border: 作用: 设置在一个声明中包含所有的边框属性说明: 可以设置 ...
巧用CSS的Border属性
. 作者:冯永曜来源:黄山村夫制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助.我们先来认识一下"Border"(画边框),它是CSS的一个属性,用它可以 ...
CSS Border属性solid(实线)使用介绍
Border(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,可以给文本加边框,给导航菜单加分隔线,下面与大家分享个实例,感兴趣的朋友可以了解下制作过 ...
php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
图解CSS的padding,margin,border属性
图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中 ...
CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
【网页制作】CSS文本和字体属性讲解【附讲解视频】
1.CSS文本和字体属性的作用:给文本和字体设置样式(具体看第二部分) 注意:在html中我们可以省略单位,但CSS中不可以省略单位. 简单的说大多数情况在html的body标签中我们可以省略单位,但 ...

制作不同方向的三角形（border属性）

制作不同方向的三角形（border属性）相关推荐

最新文章

热门文章