边框立体样式css,立体感的边框

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

CSS border（边框）样式写法总结

border属性：在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。

语法：border： border-width | border-style | border-color;

border-width ：边框宽度。可以指定长度值。如1px，1em（单位为px，pt，em等）。或者使用关键字medium（默认），thick，thin。

border-top-width：设置元素上边框宽度

border-right-width：设置元素右边框宽度

border-bottom-width：设置元素下边框宽度

border-left-width：设置元素左边框宽度

border-style ：边框样式。

border-top-style：设置元素上边框样式

border-right-style：设置元素右边框样式

border-bottom-style：设置元素下边框样式

border-left-style：设置元素左边框样式

属性值有：

none：无边框。

hidden：隐藏边框。对于表，hidden 用于解决边框冲突。

dotted：点状边框。

dashed：虚线边框。

solid：实线边框。

double：双线边框。两条单线与其间隔的和等于指定的border-width值。

groove：3D凹槽边框。

ridge：3D垄状边框。

inset：凹边框。

outset：凸边框。

border-color ：边框颜色。

1.1 边框各样式效果图

1.2 四条边颜色样式相同

1.3 四条边颜色不同，样式相同

1.4 四条边颜色相同，样式不同

1.5 设置上边框宽度、样式、颜色

1.6 设置右边框宽度、样式、颜色

1.7 设置下边框宽度、样式、颜色

1.8 设置左边框宽度、样式、颜色

以上对border边框属性进行了基础操作，大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解，那就在回复区畅所欲言吧，我定会吸取精华~如有写错欢迎大家回复，我以后定会更加细心 _