暑期实践——7.13

最新推荐文章于 2024-11-01 10:18:14 发布

YY__111

最新推荐文章于 2024-11-01 10:18:14 发布

阅读量49

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/YY__111/article/details/131764474

版权

文章详细介绍了CSS中用于设置元素边框宽度、样式、颜色以及外边距的属性，包括border-right,border-bottom,border-left,border-color,border-style以及margin的各个方向。每个属性的语法、使用条件和示例代码都得到了清晰的展示，帮助读者理解如何控制网页元素的边框和空间布局。

摘要由CSDN通过智能技术生成

（3）右边框宽度（border-right）

语法：

border-right : border-width || border-style || border-color

（4）下边框宽度（border-bottom）

语法：

border-bottom : border-width || border-style || border-color

（5）左边框宽度（border-left）

语法：

border-right : border-width || border-style || border-color

（6）边框颜色（border-color）

语法：

border-color : color

要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。如果border-style设置为none，本属性将失去作用。

示例：

body { border-color: silver red }

body { border-color: silver red rgb(223, 94, 77) }

body { border-color: silver red rgb(223, 94, 77) black }

h4 { border-color: #ff0033; border-width: thick }

p { border-color: green; border-width: 3px }

p { border-color: #666699 #ff0033 #000000 #ffff99; border-width: 3px }

（7）边框样式（border-style）

语法：

border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | outest

要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。如果border-style设置为none，本属性将失去作用。

案例

<html>
<head>
<meta charset="utf-8">
<title>border-style</title>
   <style type="text/css">
       div{
           border-width: 6px;
           border-color: #000000;
           margin: 20px;
           padding: 5px;
           background-color: #FFFFCC;
       }
   </style>
</head>

<body>
   <div style="border-style: dashed">The border-style of dashed.</div>
   <div style="border-style: dotted">The border-style of dotted.</div>
   <div style="border-style: double">The border-style of double.</div>
   <div style="border-style: groove">The border-style of groove.</div>
   <div style="border-style: inset">The border-style of inset.</div>
   <div style="border-style: outset">The border-style of outset.</div>
   <div style="border-style: ridge">The border-style of ridge.</div>
   <div style="border-style: solid">The border-style of solid.</div>
</body>
</html>