当前位置:首页 > Web开发 > 正文

不过应用于表时除外

2024-03-31 Web开发

标签:

原文:css中如何使用border属性与display属性

border属性介绍

border属性设置元素边框。

边框3个要素如:粗细、线型、颜色。

边框线型属性值说明表如: 属性指 描述
none   界说无边框。  
hidden   与 "none" 不异。不过应用于表时除外,对付表,hidden 用于解决边框斗嘴。  
dotted   界说点状边框。在大大都浏览器中泛起为实线。  
dashed   界说虚线。在大大都浏览器中泛起为实线。  
solid   界说实线。  
double   界说双线。双线的宽度即是 border-width 的值。  
groove   界说 3D 凹槽边框。其效果取决于 border-color 的值。  
ridge   界说 3D 垄状边框。其效果取决于 border-color 的值。  
inset   界说 3D inset 边框。其效果取决于 border-color 的值。  
outset   界说 3D outset 边框。其效果取决于 border-color 的值。  
inherit   规定应该从父元素担任边框样式。  
边框标的目的属性值说明表如: 属性 描述
border-top   设置元素上边框。  
border-bottom   设置元素下边框。  
border-left   设置元素左边框。  
border-right   设置元素右边框。  
边框实践

实践代码:

Copy

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>边框</title> <style> .box{ width: 200px; height: 100px; border: 1px solid red; } </style> </head> <body> <div class="box"> 微笑是最初的崇奉 </div> </body> </html>

功效图

技术图片

注意:边框颜色可以省略不写,默认为黑色。如果其他2个属性不写就不会显示边框。

设置元素边框标的目的实践

代码块

Copy

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>边框</title> <style> .box{ width: 200px; height: 100px; border-top: 2px double red; border-bottom: 2px ridge lawngreen; border-left: 2px inset darkorange ; border-right:2px groove darkblue; } </style> </head> <body> <div class="box"> 微笑是最初的崇奉 </div> </body> </html>

功效图

技术图片

display属性介绍

display属性它是显示的意思,display属性可以将行内元素与块级元素之间彼此转换,将隐藏的元素设置显示状态或将显示的元素设置隐藏状态。

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/32190.html