首页 » CSS » CSS深入理解之border

CSS深入理解之border

原文 http://blog.csdn.net/muzi187/article/details/79192489

2018-01-30 02:00:09阅读(250)

慕课学习-->前端开发-->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;虚线

CSS深入理解之border

(3)border-style:dotted; 点线

CSS深入理解之border

在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.兼容性好

举例:

 CSS深入理解之border

<!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; 山脊。

这四种兼容性差。

CSS深入理解之border

三、Border-color与color

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

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

四、Border与background定位

1、background定位的局限

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

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

CSS深入理解之border

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

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

1、构建三角形

CSS深入理解之border

<!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、构建梯形

CSS深入理解之border

<!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>


最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹