border-style

border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-style兼容性很好，基本所有浏览器都兼容

border-style拥有一下属性值

值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

这里主要使用border-style：double的小用法

实例如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>border-style:double</title><link rel="stylesheet" href=""><style type="text/css">div{width: 200px;height: 50px;line-height: 50px;text-align: center;margin-bottom: 20px;}div.box1{height: 50px;border: 6px double red;}div.box2{height: 50px;border: 12px double red;}div.box3{height: 50px;border: 24px double red;}</style>
</head>
<body><div class="box1">我是box1</div><div class="box2">我是box2</div><div class="box3">我是box3</div>
</body>
</html>

效果如下：

有图中咱可以看出“双线double” 实际上有三部分组成：

也就是效果图中所示那样

border-width	外框宽度	中间透明宽度	内框宽度
6px	2px	2px	2px
12px	4px	4px	4px
24px	8px	8px	8px

我给定的border宽度正好是3的倍数，如果不是三的倍数，那么外框，中间，内框的宽度该如何分配呢？效果图如下：

可以看出他们之间是有细微差别的，外框宽度、中间透明宽度、内框宽度之间相差1px。

border-width	外框宽度	中间透明宽度	内框宽度
7px	2px	3px	2px
8px	3px	2px	3px
9px	3px	3px	3px

border-style：double ；实用如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">div.box{background-color: gray;padding: 20px;}div.nav{width: 30px;height: 4px;border-top: 12px double ;border-bottom: 4px solid black;color: red;}div.nav:hover{color: white;border-bottom-color: skyblue;}</style>
</head>
<body><div class="box"><div class="nav"></div></div>
</body>
</html>

border之border-style用法相关推荐

border的几个用法。
1.三等分 2.传统的十字添加 3.定义块状元素的高度,边界 4.三角形 <!DOCTYPE html> <html><head><meta charset= ...
border:0 none,border:none;,border:0;三者之间的区别
border:0; 时把border设为0像素,虽然在页面上看不到,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值. bord ...
Element-UI学习之旅-Border边框及图标
你能获得什么? 如何设置Border边框,如何使用icon图标,了解到Element-ui字体和颜色的知识 Border 边框我们对边框进行统一规范,可用于按钮.卡片.弹窗等组件里. border主 ...
【html】盒模型div，边框border，内边距padding，外边距margin
初识盒模型要想学习盒模型,首先要知道什么是盒模型.顾名思义,每个div标签都是一个矩形,像一个盒子,所以HTML页面布局可以理解为多个盒子嵌套排列而成. 盒模型的组成盒模型包括:content(内 ...
html--盒子的边框属性（border）
content:内容框(我们设置的宽高是内容框的宽高) padding:内边距 top right bottom left(四边--一般默认指定的方向) border:边框线包裹了内边距(四边) ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
css border 虚线间距_一小时快速了解 CSS 基础
这一章,我们开始学习 CSS 样式表有关的知识点,通过 CSS 来控制 HTML 标签和元素的样式的方法和规范. 当然,结合视频观看效果更佳. CSS 和 HTML 不是同一种代码语言,所以自然语法书 ...
input border IE6 bug
border:none;与border:0;的区别体现有两点:一是理论上的性能差异二是浏览器兼容性的差异. 1.性能差异 [border:0;]把border设为"0"像素虽然在页 ...
移动端页面0.5px border的实现
移动端上经常发现1px边框异常的粗,因此,决定用伪类配合css3来实现0.5px边框代码如下: 1 <!doctype html> 2 <html lang="en&qu ...
【前端小技巧】利用border画三角形及梯形
border是围绕元素内容和内边距的一条或多条线,border 属性允许你规定元素边框的样式.宽度和颜色值: border-width 粗细 none/hidden/solid/dashed/dot ...

border之border-style用法

border-style

这里主要使用border-style：double的小用法

border之border-style用法相关推荐

最新文章

热门文章