css边框border(含代码,易懂) |
您所在的位置：网站首页 › HTML虚线英文 › css边框border(含代码,易懂) |
|
css中边框有很多的属性方法，让我为大家介绍一下吧！ 1.边框样式(border-style) 常用属性简单介绍none没有边框,即忽略所有边框的宽度(默认值)solid设置边框为实线dashed设置边框为虚线dotted设置边框为点线double设置边框为双实线如下代码： DOCTYPE html> 边框样式 div {width: 100px;height: 100px;} .none {border-style: none; /* 无边框 */} .solid {border-style: solid; /* 实线 */} .dashed {border-style: dashed;/* 虚线 */} .dotted {border-style: dotted;/* 点线 */} .double {border-style: double;/* 双实线 */}在我们设置边框样式的时候我们可以指定某一条边进行修饰,也可以为四条边进行修饰 属性名对应的边框方位border-top-style上边框样式(属性值为上面表格内的常用属性)border-right-style右边框样式(属性值为上面表格内的常用属性)border-bottom-style下边框样式(属性值为上面表格内的常用属性)border-left-style左边框样式(属性值为上面表格内的常用属性)如下代码： DOCTYPE html> 带方向的边框样式 div {width: 100px;height: 100px;} .top {border-left-style: none; /* 无上边框 */} .right {border-right-style: solid; /* 右边框为实线 */} .bottom {border-bottom-style: dashed;/* 下边框为虚线 */} .left {border-left-style: dotted;/* 左边框为点线 */}border-style也是可以同时设置四个方向的边框 属性名属性值对应的边框方位border-style4个值时对应的边框样式(上 右 下 左)border-style3个值时对应的边框样式(上 左右 下)border-style2个值时对应的边框样式(上下 左右)border-style1个值时对应的边框样式(上下左右)代码如下: DOCTYPE html> 四个值及以下 div {width: 100px;height: 100px;} .one {border-style: solid; /* 上右下左(边框)都为实线 */}/*(样式属性一个值时)*/ .two {border-style: solid dashed; /* 上下(实线),左右(虚线)*/}/*(样式属性二个值时)*/ .three {border-style:solid dashed dotted;/* 上(实线),左右(虚线),下(点线) */}/*(样式属性三个值时)*/ .four {border-style:solid dashed double dotted;/* 上(实线),右(虚线),下(双实线),左(点线) */}/*(样式属性四个值时)*/ 2.边框宽度(border-width)特别注意要设置边框样式 在我们边框里是可以设置某一条边框的宽度的，特别注意添加边框宽度前要给边框上边框样式 属性名需要设置边框宽度的方位border-top-width上边框宽度,宽度为数值类型(记住要跟px)border-right-width右边框宽度,宽度为数值类型(记住要跟px)border-bottom-width下边框宽度,宽度为数值类型(记住要跟px)border-left-width左边框宽度,宽度为数值类型(记住要跟px)代码如下： DOCTYPE html> 带方向的边框样式 /* 特别注意,需要设置给边框宽度前一定要给边框设置边框样式 */ div {width: 100px;height: 100px;border-style:solid;} /* 记住要值为数值型,要加上px(像素) */ .top {border-left-width: 1px; /* 上边框宽度1px */} .right {border-right-width: 1px; /* 右边框宽度1px */} .bottom {border-bottom-width: 1px;/* 下边框宽度1px */} .left {border-left-width: 1px;/* 左边框宽度1px */}border-width也是可以同时设置四个方向边框的宽度 属性名属性值对应的边框宽度方位border-width4个值时对应的边框宽度(上 右 下 左)border-width3个值时对应的边框宽度(上 左右 下)border-width2个值时对应的边框宽度(上下 左右)border-width1个值时对应的边框宽度(上下左右)代码如下: DOCTYPE html> 四个方向边框宽度 /* 特别注意添加边框宽度之前需要添加边框样式 */ /* 记住要值为数值型,要加上px(像素) */ div {width: 100px;height: 100px;border-style:solid;} .one {border-width: 1px; /* 上右下左(宽度1px) */}/*(一个值时)*/ .two {border-width: 1px 2px; /* 上下(1px),左右(2px)*/}/*(二个值时)*/ .three {border-width:1px 2px 3px;/* 上(1px),左右(2px),下(3px) */}/*(三个值时)*/ .four {border-width:1px 2px 3px 4px;/* 上(实线),右(虚线),下(双实线),左(点线) */}/*(四个值时)*/ 3.边框颜色(border-color)border-color可以取英文颜色,rgb(r,g,b),rgba(r,g,b,a)可以设置透明,十六进制的方法#AABBCC 来设置边框的颜色 特别注意要设置边框样式 设置边框颜色各个方向: 属性名对应的边框颜色border-top-color上边框颜色border-right-color右边框颜色border-bottom-color下边框颜色border-left-color左边框颜色代码如下: DOCTYPE html> 边框颜色 /* 特别注意要添加边框样式 */ div {width: 100px;height: 100px;border-style: solid;} .top {border-left-color: pink; /* 左边框为粉色 */} .right {border-right-color: rgb(0, 0, 0); /* 右边框为黑色 */} .bottom {border-bottom-color: #fff;/* 下边框为白色 */} .left {border-left-color: rgba(0, 0, 0, 0.1);/* 左边框为透明的黑色 */}border-color也是可以同时设置四个方向边框的颜色 属性名属性值对应的边框颜色方位border-color4个值时对应的边框颜色(上 右 下 左)border-color3个值时对应的边框颜色(上 左右 下)border-color2个值时对应的边框颜色(上下 左右)border-color1个值时对应的边框颜色(上下左右)代码如下: DOCTYPE html> 边框颜色设置多个值时 /* 特别注意要设置边框样式 */ div {width: 100px;height: 100px;border-style: solid;} .one {border-color: rgb(0, 0, 0); /* 上右下左(黑色) */}/*(属性值一个时)*/ .two {border-color: #fff #000; /* 上下(白色),左右(黑色)*/}/*(属性值二个时)*/ .three {border-color:pink orange red;/* 上(粉色),左右(橙色),下(红色) */}/*(属性值三个时)*/ .four {border-color:rgba(0, 0, 0, 0.1) pink orange red;/* 上(透明的黑色),右(粉色),下(橙色),左(红色) */}/*(属性值四个时)*/ 4.边框复合属性(border)我们也可以指定某一条边进行修饰，也是有复合属性 属性名属性值border-top边框宽度 边框样式 边框颜色border-right边框宽度 边框样式 边框颜色border-bottom边框宽度 边框样式 边框颜色border-left边框宽度 边框样式 边框颜色代码如下: DOCTYPE html> 边框复合属性 div {width: 100px;height: 100px;} .top {border-left: 1px solid #fff; /* 上边框宽度1px,白色的实线 */} .right {border-right:2px dashed #000; /* 右边框宽度2px,黑色的虚线 */} .bottom {border-bottom: 3px dotted #fff;/* 下边框宽度3px,白色的点线 */} .left {border-left:4px double #000;/* 左边框宽度4px,黑色的双实线 */}在我们边框里有一种非常常用的写法直接border 复合属性的基本格式 border:边框宽度 边框样式 边框颜色；(这是最常用的方法) 代码如下: DOCTYPE html> 边框复合属性 .box { width: 100px; height: 100px; border: 1px solid #000;/* 一个边框宽度为1px,实线边框,边框也是为黑色的元素 */ } 我是复合属性本文章进入尾声，感谢各位大佬的阅读，如果有什么不对的地方，还请大家指出一下，十分感谢！ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |