| 认识border | 您所在的位置：网站首页 › 边框颜色代码 › 认识border |
认识border
|
border就是边框。边框有三个要素：粗细、线型、颜色。 颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。 div{ padding: 0; } .box{ width: 300px; height: 300px; /* 边框的3个要素，其中颜色，可以省略不写。不写默认是黑色。 */ border: 3px solid; }
线型的设置： /* dotted点虚线 */ border: 3px dotted blue;
可以发现菱形边框与沟槽状边框的区别是亮面和暗面相反 /* inset3D凹边 */ border: 50px inset blue;
凹凸边的亮暗也是相反的 不过线型在不同浏览器有不同的显示效果比如，border:10px ridge red; 在chrome和firefox、IE中有细微差别： chrome：
firefox：
IE：
谷歌和火狐差别不大，但ie的颜色明显深了很多 border属性能够被拆开 border是一个大综合属性， border:1px solid red; border属性能够被拆开，有两大种拆开的方式：1） 按3要素:border-width、border-style、border-color2） 按方向：border-top、border-right、border-bottom、border-left 把边框border按3要素： .box{ width: 300px; height: 300px; /* 按3要素拆开: */ border-width: 30px; border-style: solid; border-color: aqua; }
如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序 /* 10px 20px ---上下10 左右20 */ border-width: 10px 20px; /* solid dashed dotted --- 上solid 左右dashed 下dotted */ border-style: solid dashed dotted; /* red green blue yellow --- 上red 右green 下blue 左yellow */ border-color:red green blue yellow ;
把边框border按方向来拆开 .box{ width: 300px; height: 300px; /* 按照方向拆分 */ border-top: 30px solid red; border-right: 30px solid green; border-bottom: 30px solid blue; border-left: 30px solid yellow; }
把边框border按方向还能再拆一层，就是把每个方向的，每个要素拆开，一共12条语句： /* 边框按方向还能再拆一层把每个方向按照3要素写 */ border-top-width:30px; border-top-style:solid; border-top-color:red; border-right-width: 30px; border-right:solid; border-right-color:green; border-bottom-width: 30px; border-bottom-style: solid; border-bottom-color: aqua; border-left-width: 30px; border-left-style:solid; border-left-color:blue;border可以没有 .box{ width: 300px; height: 300px; background-color: red; /* 4个边都没有边框 */ /* border: none; */ border:30px solid blue; /* 某一个边没有边框 */ border-left: none; } 盒子
outline轮廓线 outline轮廓线 在边框线的外面，它和盒模型没有任何关系。轮廓线不占据页面宽度。 去除input文本框的轮廓线：outline: none; .txt{ width: 300px; height: 26px; line-height: 26px; border: 1px solid greenyellow; outline: none; }
轮廓线不占据页面宽度。 outline: 20px solid orange;
所以，我们在实际项目中编写页面的时候，我们通常使用outline轮廓线去查看当前某个区块在页面中的位置。 border可以透明 透明是让颜色不可见，但是具体的某个方向的边框实际在浏览器渲染的时候，边框还是存在。 .box{ width: 0px; height: 0px; border-top: 200px solid transparent; border-right: 200px solid green; border-bottom: 200px solid transparent; border-left: 200px solid transparent; }
border制作小箭头： .arrow{ width: 20px; height: 20px; border-top: 1px solid red; border-left: 1px solid red; transform: rotate(45deg); margin: 50px 0 0 50px; }
如上代码,三角形箭头原理:正方形的任意相邻的两边线然后旋转一定的角度，得到我们需要的任意方向的箭头,deg角度单位,rotate旋转角度. 小三角形的大小由正方形的宽高去控制 小三角形的粗细由border边框线的宽度去控制 小三角形的颜色由border边框线的颜色去控制 |
【本文地址】