border 外边框

简介: 语法: border: || || = | thin | medium | thick = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 默认值:看每个独立属性 适用于:所有元素 继承性:无 动画性:看每个独立属性 计算值:看每个独立属性 相关属性:[ border-top ] || [ border-right ] || [ border-bottom ] || [ border-left ]   取值: : 设置或检索对象边框宽度。

语法:

border<line-width> || <line-style> || <color>

<line-width> = <length> | thin | medium | thick

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

默认值:看每个独立属性

适用于:所有元素

继承性:无

动画性:看每个独立属性

计算值:看每个独立属性

相关属性:[ border-top ] || [ border-right ] || [ border-bottom ] || [ border-left ]

 

取值:

<line-width>: 设置或检索对象边框宽度。
<line-style>: 设置或检索对象边框样式。
<color>: 设置或检索对象边框颜色。

 

说明:

复合属性。设置对象边框的特性。参阅outline属性。

  • 如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
  • 对应的脚本特性为border

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>border 外边框</title>
    <style type="text/css">
    .parent{
        border-width: 1px 1px 2px 3px;
        border-style: solid;
        border-color: #0ff;
        width: 300px;
        height: 200px;
    }
    </style>
</head>
<body>
<div class="parent"></div>
</body>
</html>
开始做,坚持做,重复做
相关文章
|
3月前
|
前端开发 数据可视化 容器
前端基础(十六)_BFC、box-shadow(盒子阴影)、text-shadow(文字阴影)
本文介绍了前端开发中块级格式化上下文(BFC)的概念和作用,以及如何创建BFC。同时,文章还讲解了`box-shadow`和`text-shadow`属性的用法,包括如何为元素添加阴影效果,并通过示例代码展示了这些属性的具体应用。
36 0
前端基础(十六)_BFC、box-shadow(盒子阴影)、text-shadow(文字阴影)
|
5月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
30 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
4月前
|
前端开发 UED 容器
掌握内边距、外边距、边框的使用场景与用掌握内边距、外边距、边框的使用场景与用法
掌握内边距、外边距、边框的使用场景与用掌握内边距、外边距、边框的使用场景与用法
|
Web App开发 iOS开发
怎样给边框添加阴影?CSS3属性box-shadow帮你搞定!
CSS3 给边框添加阴影 -- box-shadow属性
1060 1
怎样给边框添加阴影?CSS3属性box-shadow帮你搞定!
|
前端开发
css:border-radius绘制边框圆角-全圆和椭圆
css:border-radius绘制边框圆角-全圆和椭圆
141 0
css:border-radius绘制边框圆角-全圆和椭圆
|
前端开发
一个元素纯CSS实现开关按钮【介绍box-shadow、单边或多重阴影、appearance属性】
借助checkbox表单元素、:checked伪类、::before/::after伪元素,就可以只需一个input[type="checkbox"]元素,通过纯CSS实现Switch开关效果的按钮.
507 0
一个元素纯CSS实现开关按钮【介绍box-shadow、单边或多重阴影、appearance属性】
|
前端开发
css:box-shadow层级问题-相邻元素背景遮盖了阴影
css:box-shadow层级问题-相邻元素背景遮盖了阴影
130 0
css:box-shadow层级问题-相邻元素背景遮盖了阴影
|
前端开发
web前端学习(十九)——CSS3盒子模型(Box Model)、边框属性(border)及轮廓属性(outline)的相关设置
web前端学习(十九)——CSS3盒子模型(Box Model)、边框属性(border)及轮廓属性(outline)的相关设置
web前端学习(十九)——CSS3盒子模型(Box Model)、边框属性(border)及轮廓属性(outline)的相关设置
|
前端开发
web前端学习(二十)——CSS3外边距属性(margin)及填充属性(padding)的相关设置
web前端学习(二十)——CSS3外边距属性(margin)及填充属性(padding)的相关设置
web前端学习(二十)——CSS3外边距属性(margin)及填充属性(padding)的相关设置
|
前端开发
CSS样式更改——字体设置Font&边框Border
CSS样式更改——字体设置Font&边框Border
400 0