css设置边框四边的方法

小编给大家分享一下css设置边框四边的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

css设置边框四边的方法:1、使用边界底部属性设置下边框;2、使用border-left属性设置左边框;3、使用边境属性设置右边框;4、使用border-top属性设置上边框。

<强>边框css四边怎么加?

1,使用边界属性,一次性设置四个边框的样式

边界:在一个声明中设置所有的边框属性。

可设置的边框属性:

边框宽度:指定边框宽度

边框样式:指定边框样式

边框颜色:指定边框颜色

示例:设置四个边框样式

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞, 　　& lt; style> 　　p 　　{ 　　边界:5 px  solid 红色; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; p>段落中的一些文本。;/p> 　　& lt;/body> 　　& lt;/html>

效果图:

2,使用边界底部,border-left,边境,border-top分别设置四个边框的样式

边界底部:在一个声明中设置所有的下边框属性。

border-left:在一个声明中设置所有的左边框属性。

边境:在一个声明中设置所有的右边框属性。

border-top:在一个声明中设置所有的上边框属性。

示例:

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞, 　　& lt; style> 　　p  　　{ 　　边界底部:thick  dotted  # ff0000; 　　border-left: thick  solid  # ff0000; 　　border-top: thick  dashed  # ff0000; 　　边境:thick  double  # ff0000; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; p>段落中的一些文本。;/p> 　　& lt;/body> 　　& lt;/html>

效果图:

以上是“css设置边框四边的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

css设置边框四边的方法