css中border属性设置

1.单独设置

a.语法

/*所有的赋值都符合顺时针,看对面,若没有,相邻则为最上面*/
/*设置边框的宽度*/
border-witdth:像素值1,像素值2...像素值4;
/*设置边框的风格 solid 实线 dashed 虚线 dotted原点线*/
border-style: 风格1,风格2,风格3,风格4;
/*设置边框的颜色*/
border-color: 颜色值1,颜色值2,颜色值3,颜色值4;

b.源代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性值的设置</title><style type="text/css">*{/* 清除浏览器默认样式的影响 */padding: 0;margin: 0;}#top{width: 200px;height: 200px;border-width: 10px 20px 40px 30px;/* 没有设置边框的类型的话,没有任何的显示效果的 */border-style: solid dashed dotted solid;/* solid是实线,dashed是虚线 dotted是原点线 *//* 没有设置颜色,是没有任何肉眼可见的结果的 */border-color: brown skyblue yellow grey;background-color: red;}</style>
</head>
<body><div id="top"></div>
</body>
</html>

c.展示效果

2.合并设置

a.语法

border: 边框宽度 边框类型 边框颜色;

b.源代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性值的设置</title><style type="text/css">*{/* 清除浏览器默认样式的影响 */padding: 0;margin: 0;}#top{width: 200px;height: 200px;border: 10px solid skyblue;background-color: red;}</style>
</head>
<body><div id="top"></div>
</body>
</html>

c.展示效果

3.按照方向设置

a.语法

border-方位: 边框的宽度 边框的类型 边框的颜色;
/*
其中方位有上（top)、右(right)、下(bottom)、左(left)
*/

b.源代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性值的设置</title><style type="text/css">*{/* 清除浏览器默认样式的影响 */padding: 0;margin: 0;}#top{width: 200px;height: 200px;/* 对边框每条线设置不同的样式 */border-top: 10px solid gray;border-bottom: 15px dashed brown;border-left: 8px solid yellow;border-right: 13px dotted purple;background-color: red;}</style>
</head>
<body><div id="top"></div>
</body>
</html>

c.展示效果

css中border属性设置相关推荐

php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
border属性 php,如何通过CSS的border属性为图片设置边框效果
如何为通过css为图片设置一个边框呢,HTML中是通过标记的border属性值,给图片添加边框的,css中是通过border属性,为图片设置各式各样的边框样式,border-style定义边框的样式, ...
html border 边距,css中border-sizing属性的用法
这篇文章给大家介绍的文章内容是关于css中border-sizing属性的用法,有很好的参考价值,希望可以帮助到有需要的朋友. box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子 ...
使html轮廓颜色不同,css中border颜色不同怎么设置？
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. css中bord ...
html怎么设置左偏移量,CSS中margin属性的偏移量详解（代码示例）
本篇文章给大家介绍一下CSS中margin属性的偏移量,有感兴趣的朋友可以看一看. 话不多说,我们直接进入正题~ 我们先来看一个具体的例子(相关推荐:CSS学习手册) 代码入下:HTML文件和CSS文 ...
html5border设置彩色,css中border颜色不同怎么设置？
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. css中bord ...
CSS属性详解——使用border属性设置边框
CSS 是一种用于网页布局控制的语言,其中 border 属性用于为网页元素设置边框样式.颜色和宽度等.在本文中,我们将深入介绍 border 属性的详细语法和使用方式,帮助您轻松掌握使用. bord ...
CSS中border的所有样式属性
CSS中border的所有样式属性 1.solid:实线使用方法:border:solid 1px #000; 我发现border:1px solid #000;和border:solid 1px ...
在CSS中clear属性的妙用
这里向大家描述一下在CSS中clear属性妙用,图片和文字元素出现在另外元素中,那么它们(图片和文字)可称为浮动元素(floatingelement).使用clear属性可以让元素边上不出现其它浮动元 ...
【拼爹坑爹不比爹】深入理解css中position属性及z-index属性
总结:拼爹坑爹不比爹 1,定位移动:距左上角left+top;(移动后对于移动前:如果值为负数,则直接换成整数:如果值为整数,则直接改变相对方向.) 2,单一父元素不设值,子z-index才奏效:&q ...

css中border属性设置

css中border属性设置

1.单独设置

a.语法

b.源代码

c.展示效果

2.合并设置

a.语法

b.源代码

c.展示效果

3.按照方向设置

a.语法

b.源代码

c.展示效果

css中border属性设置相关推荐

最新文章

热门文章