1、 border-width:不支持不百分比

1）受本身的使用场景决定。

例子：左边为手机，右边为显示器，但是他们边框的宽度是差不多的，不会因为设备大就让边框宽度变大。

2、 border-width:还支持关键字（thin=1px medium=3px thick=5px）

但是border中最常用的却是thin 为什么他的默认属性为3px? border-style:double的默认属性为三像素。

3、border-style:double

1)border-style: solid; 表示实线，很熟悉，pass

2)border-style: dashed; 虚线，挺熟，pass

3）border-style: dotted ; 点线，不熟

在Chrome/FireFox:中是小方形

在IE中是小圆形我们可以用这个属性实现圆角属性。

4）border-style:double; 双线，非常不熟。

分别表示（左中间右）的大小双线宽度相等中间宽度（+-1）

双线布局的兼容性非常好，在平时有许多可以应用的地方

例子1:绘制图形，实现下拉列表的三等分

5）border-inset ; 内凹大眼瞪小眼；

6）border-outset: 外凸，大眼瞪小眼

7）border-style: groove; 沟槽

只需要了解

4 、border-color 与 color

1）当没有对变框指定颜色的时候，变框的颜色就是字体的颜色

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>color</title>

	<style>

.box{

	border: 10px solid;

	color: red;

}

</style>

</head>

<body>

<div class="box">我的颜色是</div>

</body>

</html>

说明：box-shadow, text-shadow也是和上面一样，默认颜色也为字体的颜色

2）这个特性有什么用

5、border与background的定位

background定位的局限：css2.1中的定位只能相对于左上角数值定位，不能相对右下

例子1：我们希望不论怎么改变边框里面的图形都距离左边都是固定像素。

只需设置为：backgrouond-position: 50px 40px

例子2：如果我们希望相对于右边的距离是固定的呢

方法1：用border 设置在右边设置一个50px的透明边框

          borde-right:50px solid transparent;

          background-position:100% 40px;

6、用border 构建图形

深入理解之css中的border属性的更多相关文章

css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0
css中我们经常使用到元素的border属性和属性值transparent,可能好多人还不太了解border的构成以及配合transparent的一些效果: 1.border的构成如下所示: ht ...
深入理解css中的margin属性
深入理解css中的margin属性之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
原来css中的border还可以这样玩
原来css中的border还可以这样玩前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...
css中的border还可以这样玩
在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人 ...
css中的定位属性position（转）
css中的定位属性position 同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...
CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像这个属性是我们用的最多的属性设置背景图像有两个方式 background: ...
CSS中的display属性（none,block,inline,inline-block,inherit）
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
细说CSS中的display属性
相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...

随机推荐

解析xml文件 selectSingleNode取不到节点
今天在做批量生成XML的时候,碰到一个情况解析xml文件 selectSingleNode一直返回NULL. XML的格式开头有一句这个<CE401Message xmlns="ht ...
【python练习题】程序12
#题目:判断101-200之间有多少个素数,并输出所有素数. #判断素数的方法:用一个数分别去除2到sqrt(这个数),如果能被整除,则表明此数不是素数,反之是素数. from math import ...
reshape
reshape 编辑 reshape是一种函数,函数可以重新调整矩阵的行数.列数.维数.在matlab命令窗口中键入doc reshape或help reshape即可获得该函数的帮助信息. B = ...
python第三方库的四种安装方法
1,直接pip install安装 2,在python-->default setting-->project interprer-->add 3,在这个链接里找到需要的包,下载 h ...
Python内建GUI模块Tkinter(一)
Python主窗口 Python特定的GUI界面,是一个图像的窗口,tkinter是python自带的,可以编辑的GUI界面,我们可以用GUI实现很多一个直观的功能,如何想开发一个计算器,如果只是一个 ...
对如下字符串(234453)[234]{2324}分析它的括号使用是否正确，括号匹配（Java实现）
我的一种思路是递归: private static String s = "(2344[)]53[234]{2324}"; private static boolean f(int ...
windows 系统错误码总结
windows 错误码大全: 操作成功完成. 功能错误. 系统找不到指定的文件. 系统找不到指定的路径. 系统无法打开文件. 拒绝访问. 句柄无效. 存储控制块被损坏. 存储空间不足,无法处理此命令. ...
洛谷P1829 [国家集训队]Crash的数字表格
题目描述今天的数学课上,Crash小朋友学习了最小公倍数(Least Common Multiple).对于两个正整数a和b,LCM(a, b)表示能同时整除a和b的最小正整数.例如,LCM(6, ...
每天一个linux命令（02）：route命令
route命令用来显示并设置Linux内核中的网络路由表,route命令设置的路由主要是静态路由.要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或者同时位于两个网络的网关来实现. 在L ...
Speech语音播报
System.Speech 这个命名空间,报可以阅读文字和播放音频. 环境 W10 VS2017 CMMT 1.添加程序集引用 System.Speech 2.实例化播音类,并且播放一个文本 Spe ...

深入理解之css中的border属性