【CSS Zoro 03】边框样式style 宽度width 颜色color 边top 简写边框border 圆角边框border

2023-06-06 07:33| 来源: 网络整理| 查看: 265

CSS 边框 border-style边框宽度 border-width边框颜色 border-color边框的边 border-top-style简写边框 shorthand圆角边框 border-radius

边框 border-style

CSS border 属性允许指定元素边框的样式、宽度和颜色

border-style属性指定需要显示的边框类型允许值如下：

dotted - 定义点线边框dashed - 定义虚线边框solid - 定义实线边框double - 定义双边边框groove - 3D坡口边框 - border-color - 凹槽ridge - 3D脊线边框 - border-color - 垄状inset - 3D inset边框 - border-coloroutset - 3D outset边框 - border-colornonehidden border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框） p.dotted {border-style: dotted;} p.mix {border-style: dotted dashed solid double;}

点状边框

混合边框

边框宽度 border-width

border-width 属性指定四个边框的宽度可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）

p.one { border-style: solid; border-width: 20px 5px; /* 上下边框为20px 左右边框为5px*/ } p.two { border-style: solid; border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */ } 边框颜色 border-color

border-color 属性用于设置四个边框的颜色

nameHEXRGBHSLtransparent 未设置 border-color，则继承元素的颜色 p.one { border-style: solid; border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */ } 边框的边 border-top-style

还有 border-right-style border-bottom-style border-left-style

简写边框 shorthand border属性有： 1. border-width 2. border-style(必须) 3. border-color p { border: 5px solid red; } p { border-left: 6px solid red; background-color: lightgrey; } 圆角边框 border-radius p { border: 2px solid red; border-radius: 5px; }

【本文地址】

公司简介

联系我们