CSS中Border(边框)

1.css边框
css边框(border)可以使围绕元素内容和内边距的一条或多条线,对于这些线条,可以直接自定义它们的样式,宽度颜色等.
2.边框样式
border-style的值
|

none	默认无边框
dotted	定义一个点线框
dashed	定义一个虚线框
solid	定义实线边界
double	定义两个边界,两个边界的宽度和boder-width的值相同
groove	定义3D沟槽边界,效果取决于边界的颜色值
rigde	定义3D脊边界,效果取决于边界的颜色值
inset	定义一个3D的嵌入边框,效果取决于边界的颜色值
outset	定义一个3D的突出边框,效果取决于边界的颜色值

3.边框-单独设置个边

border-top-style:
border-bottom-style:
border-right-style:
border-left-style:

在后面设置自己想要的样式.
4.透明边框

border-color:transparent;

代码:
1.边框样式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p{borde-width:10px;}p.dotted{border-style:dotted}p.dashed{border-style:dashed}p.solid{border-style:solid}p.double{border-style:double}p.groove{border-style:groove}p.ridge{border-style:ridge}p.outset{border-style:outset}</style>
</head>
<body>
<p class="dotted">A dotted border</p>
<p class="dashed">A dashed border</p>
<p class="solid">A solid border</p>
<p class="double">A double border</p>
<p class="groove">A groove border</p>
<p class="ridge">A ridge border</p>
<p class="outset">A outset border</p>
</body>
</html>

2.各自设置边框样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>border边框</title><style>div{width:100px;height:100px;background-color: #ffffff;border-top:50px solid red;border-bottom:50px solid blue;border-left:50px solid yellow;border-right:50px solid purple;}</style>
</head>
<body>
<div></div>
</body>
</html>

效果展示:

CSS中Border(边框)相关推荐

css中border边框纹理,使用CSS3实现的几种纹理图案和大象拼图
CSS 语言: CSSSCSS 确定 .pattern1 { background: linear-gradient(135deg, #eee 25%, transparent 25%) -50px ...
css中border边框纹理,8个CSS实现的纹理图案
CSS 语言: CSSSCSS 确定 html, body { margin: 0; padding: 0; height: 100%; } body { display: flex; flex-wr ...
html边框是啥意思,css中border是什么意思
css中border是什么意思?有什么用? border是边框的意思,它是css的一个简写属性,用于在一个声明设置所有的边框属性.可以设置的边框属性有:边框的宽度.边框的样式.边框的颜色. 说明: 可 ...
使html轮廓颜色不同,css中border颜色不同怎么设置？
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. css中bord ...
html5border设置彩色,css中border颜色不同怎么设置？
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. css中bord ...
CSS中border的所有样式属性
CSS中border的所有样式属性 1.solid:实线使用方法:border:solid 1px #000; 我发现border:1px solid #000;和border:solid 1px ...
css 设置border边框颜色渐变效果
一.效果首先可以看一下下图显示的实现效果: 底部边框,左侧渐变效果右侧边框,上下都有一个渐变的效果点击查看demo代码二.实现 1. linear-gradient 首先我们先了解一下css中 ...
css中border制作各种形状
css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...
CSS的border边框属性边框样式内外边框圆角合集
CSS border 属性允许指定元素边框的样式.宽度和颜色. 目录 1.四个边框 2.内外边框 3.边框样式 4.圆角边框 1.border边框属性可以设置一到四个值(上边框,右边框,下边框,左边 ...

CSS中Border(边框)

CSS中Border(边框)相关推荐

最新文章

热门文章