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属性的更多相关文章

  1. css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0

    css中我们经常使用到元素的border属性和属性值transparent,可能好多人还不太了解border的构成以及配合transparent的一些效果: 1.border的构成如下所示:   ht ...

  2. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  3. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  4. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...

  5. css中的border还可以这样玩

    在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人 ...

  6. css中的定位属性position（转）

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  7. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  8. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  9. 细说CSS中的display属性

    相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...

随机推荐

  1. TP5上传图片

    模板: <form action="{:url('Temp/addTempDo')}" enctype="multipart/form-data" met ...

  2. js4

    数组的解构赋值: 位置对象的解构赋值: 名称 // {}在解构赋值的时候,不能出现在一行的最前面,否则js解析器会把他当成一个代码块,加()({a, b} = obj),告诉他这个仅仅是一个解构语句 ...

  3. linux读取Windows的txt文件问题

    问题:Windows下生成的txt文件,在Linux下读取时会读取到多余字符(如: ^M) 原因:Windows和Linux下的换行符不一致 解决:在Linux代码中将多余字符去掉 ) buf = b ...

  4. Mayor's posters（线段树+离散化）

    这道题最关键的点就在离散化吧. 假如有三张海报[1, 10] [10, 13][15,  20] 仅仅三个区间就得占用到20了. 但是离散化后就可以是[1, 2] [2, 3] [4, 5] n到1e ...

  5. 自己实现memcpy，strcpy与strncpy

    内存拷贝函数 //实现拷贝不重叠的内存块 void* memcpy1(void* dst,const void* src,size_t count) { char* pTo = (char*)dst; ...

  6. HDU5384-Hotaru's problem-Manacher

    找出紧挨的三个回文串,例如abccbaabc ,形如ABA格式,其中AB为回文串.计算最长的长度. 首先用Manacher处理回文半径.然后就是找到两个点,都是偶数的回文串,并且共享了中间一段. 之后 ...

  7. Codeforces300 F. A Heap of Heaps

    Codeforces题号:#300F 出处: Codeforces 主要算法:树状数组/线段树 难度:4.6 思路分析: 在没看到数据范围之前真是喜出望外,直到发现O(n^2)会被卡…… 其实也不是特 ...

  8. 用随机投掷飞镖法计算Pi值（Randomness Throwing dart Pi Python）

    画一个边长为r的正方形和半径为r的四分之一的圆(如下图所示),向上面随机投掷飞镖,通过计算落在星星区域和整体区域的飞镖比例,即可求出π值. 公式推导如下: 假设正方形的边长r为1,那么飞镖落在星星区域 ...

  9. 【XSY2612】Comb Avoiding Trees 生成函数 多项式求逆 矩阵快速幂

    题目大意 本题的满二叉树定义为:不存在只有一个儿子的节点的二叉树. 定义一棵满二叉树\(A\)包含满二叉树\(B\)当且经当\(A\)可以通过下列三种操作变成\(B\): 把一个节点的两个儿子同时删掉 ...

  10. 正睿 2019 省选附加赛 Day10

    A 核心就是一个公式 \[\sum_{i = 0}^{k} S(k, i) \tbinom{x}{i} i\] S是第二类斯特林数 递推公式 \(S_2(n,k)=S_2(n−1,k−1)+kS_2( ...