CSS深入理解之border

最新推荐文章于 2023-11-06 16:40:49 发布

muzi187

最新推荐文章于 2023-11-06 16:40:49 发布

阅读量945

点赞数 1

本文链接：https://blog.csdn.net/muzi187/article/details/79192489

版权

html 同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

border

1 篇文章 0 订阅

订阅专栏

慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之border

border

一、border-width不支持百分比

类似的还有outline，box-shadow，text-shadow，......都不支持百分比值。

属性border-width支持关键字：thin（细的），medium（默认值，中等的），thick（粗的）

在CSS2.1之后，IE8+浏览器：thin（1px），medium（3px），thick（5px）

为什么border-width默认值是medium（3px）呢？

因为border-style:double至少3px才有效果。

二、了解各种border-style类型

1、border-style属性值：

（1）border-style:solid;实线

（2）border-style:dashed;虚线

（3）border-style:dotted; 点线

在IE7，IE8下，利用dotted圆点CSS实现圆角效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>absolute的破坏性</title>
<style>
.box{
	height:150px;
	width:150px;
	overflow:hidden;
}
.dotted {
	height:100%;
	width:100%;
	border:149px dotted #cd0000;
}
</style>
</head>
<body>
<div class="box">
	<div class="dotted"></div>
</div>
</body>
</html>

（4）border-style:double; 双线边框。双线宽度相等，中间间隔与线宽±1.兼容性好

举例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
.box {
	width: 120px;
	height:20px;
    border-top:60px double;
	border-bottom:20px solid;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

（5）border-style:inset; 内凹。

border-style:outset; 外凹。

border-style:groove; 沟槽。

border-style:ridge; 山脊。

这四种兼容性差。

三、Border-color与color

Border-color的默认颜色就是color。

没有指定border-color时，会使用color作为边框色。类似的还有box-shadow，text-shadow等，也是默认使用color作为颜色。

四、Border与background定位

1、background定位的局限

CSS2.1里，background定位只能相对于左上角数值定位，不能相对于右下角

利用border实现距离容器右侧50px：

五、Border与三角等图形的构建

利用border-style:solid 构建三角形和梯形。

1、构建三角形

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
.triangle {
    border-width:12px 20px;
	border-style:solid;
	border-color:red red transparent transparent;
	width:0;
	height:0;
}
</style>
</head>
<body>
<div class="triangle">
</div>
</body>
</html>

2、构建梯形

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>构造梯形</title>
<style>
.triangle {
    border-width:100px;
	border-style:solid;
	border-color:red green blue orange;
	width:100px;
	height:100px;
}
</style>
</head>

<body>
<div class="triangle"></div>
</body>
</html>

六、border与透明边框

1、background定位的局限，三角形实现

2、增加响应区域大小

.checkbox{
	border:1px solid #999;
	width:16px;height:16px;
}

复选框视觉区域大小（不含边框）是16px*16px

.checkbox{
	border:2px solid transparent;
	box-shadow:inset 0 1px,inset 1px 0,inset -1px 0,inset 0 -1px;
	background-color:#fff;
	background-clip:content-box;
	color:#d0d0d5;
}

边框使用盒阴影，border变透明用来增加点击区域，现在复选框点击区域大小是20px*20px。

3、增加可视渲染区域

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>增加可视渲染区域</title>
<style>
.icon {
    width:20px;
	overflow:hidden;
	margin-left:50px;
}
img{
	width:20px;
	position:relative;
	left:-20px;
	border-right:20px solid transparent;
	filter:drop-shadow(20px 0 #ff0080);
}
</style>
</head>
<body>
<div class="icon">
	<img src="del.png" class="">
</div>
</body>
</html>

CSS3中drop-shadow可以给png图标赋色

但是在Chrome浏览器下，页面中不可见元素的drop-shadow也是不可见的！例如：

（1）text-indent负值隐藏原始图，无投影；

（2）Clip剪裁隐藏，无投影；

（3）Margin负值隐藏原始图，无投影；

（4）Left负值隐藏原始图，无投影。

使用透明边框解决问题。

七、border在布局中的应用

border与等高布局（不支持百分比宽度，因为border不支持百分比）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
.box {
    border-left:300px solid #222;background:#aaa;
}
.left {
    width: 300px;
    margin-left:-300px;
	float:left;
	color:#fff;
	
}
h3,.module{line-height:50px;margin:0;padding-left:20px;}
</style>
</head>
<body>
<div class="box">
	<nav class="left">
		<h3>导航1</h3>
		<h3>导航2</h3>
		<h3>导航3</h3>
		<h3>导航4</h3>
		<h3>导航5</h3>
	</nav>
	<section class="right">
		<div class="module">模块1</div>
		<div class="module">模块1</div>
		<div class="module">模块1</div>
		<div class="module">模块1</div>
	</section>
	<div style="clear:both;"></div>
</div>
</body>
</html>

muzi187

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS深入理解之border

慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之borderborder一、border-width不支持百分比类似的还有outline，box-shadow，text-shadow，......都不支持百分比值。属性border-width支持关键字：thin（细的），medium（默认值，中等的），thick（粗的）在CSS2.1之后，IE8+浏览
复制链接

扫一扫