CSS 边框各边

悠悠 2022-11-13 04:28 113阅读 0赞

# CSS 边框各边 #

![在这里插入图片描述][20210325183813206.gif]

它的工作原理是这样的：  
如果 border-style 属性设置四个值：

border-style: dotted solid double dashed;  
上边框是虚线  
右边框是实线  
下边框是双线  
左边框是虚线  
如果 border-style 属性设置三个值：

border-style: dotted solid double;  
上边框是虚线  
右和左边框是实线  
下边框是双线  
如果 border-style 属性设置两个值：

border-style: dotted solid;  
上和下边框是虚线  
右和左边框是实线  
如果 border-style 属性设置一个值：

border-style: dotted;  
四条边均为虚线

<!DOCTYPE html>
    <html>
    <head>
    <style> body { text-align: center; } /* 四个值 */ p.four { border-style: dotted solid double dashed; } /* 三个值 */ p.three { border-style: dotted solid double; } /* 两个值 */ p.two { border-style: dotted solid; } /* 一个值 */ p.one { border-style: dotted; } </style>
    </head>
    <body>
    
    <h1>单独的边框</h1>
    
    <p class="four">四种不同的边框样式。</p>
    <p class="three">三种不同的边框样式。</p>
    <p class="two">两种不同的边框样式。</p>
    <p class="one">一种边框样式。</p>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70]

[20210325183813206.gif]: /images/20221022/53ab6370f0f640558a5d203359b527b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210325184017907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hSVE9OWQ==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，113人围观）

还没有评论，来说两句吧...

相关阅读

相关 css边框圆角(css边框圆角实例)

用CSS制作边框圆角线 css没有这个功能，只有用背景图来实现 ![css边框圆角(css边框圆角实例)\_css边框圆角(css边框圆角实例)][css_css_cs

不念不忘少年蓝@/ 2023年09月26日 13:14/ 0 赞/ 157 阅读

相关 css圆角边框(css圆角边框无效)

纯CSS制作圆角边框的代码是什么? \xsnazzy h1, \xsnazzy h2, \xsnazzy p \{margin:0 10px; letter-spacin

野性酷女/ 2023年09月26日 13:09/ 0 赞/ 26 阅读

相关 CSS-框模型处理外边距、边框、内边距、元素内容

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9wcmVwYXJlZGF0Y

我会带着你远行/ 2023年07月01日 07:26/ 0 赞/ 3 阅读

相关 CSS 边框各边

CSS 边框各边 ![在这里插入图片描述][20210325183813206.gif] 它的工作原理是这样的：如果 border-style 属性设置四个值：

悠悠/ 2022年11月13日 04:28/ 0 赞/ 114 阅读

相关 CSS 边框

CSS 边框 ![在这里插入图片描述][20210325175954268.gif] > CSS 边框样式 > border-style 属性指定要显示的边框类型。

灰太狼/ 2022年11月13日 04:26/ 0 赞/ 229 阅读

相关 CSS3的背景、边框和边距相关属性

CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制，进一步增强了背景功能，这些属性可以控制背景图片的显示位置、分布方式等；除此之外，CSS3还新增了多背景图片支持，从

野性酷女/ 2022年04月22日 18:44/ 0 赞/ 288 阅读

相关【CSS】边框

CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_

淩亂°似流年/ 2022年04月01日 02:51/ 0 赞/ 379 阅读

相关 CSS 之盒子模型——边框、内边距、外边距

使用width来设置盒子内容区的宽度使用height来设置盒子内容区的高度 width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内

Dear 丶/ 2022年01月26日 09:59/ 0 赞/ 661 阅读

相关 css边框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

妖狐艹你老母/ 2021年12月11日 02:23/ 0 赞/ 447 阅读

相关 CSS边框

边框每个边框有 3 个方面：宽度、样式，以及颜色。 ![aHR0cHM6Ly93czEuc2luYWltZy5jbi9sYXJnZS8wMDZReW4yUWx5MWc

雨点打透心脏的1/2处/ 2021年10月19日 10:18/ 0 赞/ 496 阅读