不过应用于表时除外
标签:
原文: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属性可以将行内元素与块级元素之间彼此转换,将隐藏的元素设置显示状态或将显示的元素设置隐藏状态。
温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/32190.html