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属性讲下我自己所积累的,与大家共享 ...

随机推荐

php2
session //将用户的会话数据存储在服务端,通过 session_start()开启session,通过$_SESSION读写session session_start(); //开启ses ...
Build 2017 Revisited: .NET, XAML, Visual Studio
For the next couple months we're going to revisit Build 2017, each post focusing on different aspect ...
POJ 2823 滑动窗口单调队列
https://vjudge.net/problem/POJ-2823 中文:https://loj.ac/problem/10175 题目给一个长度为 $N$ 的数组,一个长为 $K$ 的滑动窗体 ...
Java常用调试技巧（转）
调试不仅可以查找到应用程序缺陷所在,还可以解决缺陷.对于Java程序员来说,他们不仅要学会如何在Eclipse里面开发像样的程序,更需要学会如何调试程序.本文介绍了Java程序员必知的10个调试技巧, ...
Nginx 反向代理如何连接上游服务器
L:92 想上游服务器先建立TCP连接如三次握手下面指令可以控制握手时间 proxy_next_upstream 指令当出现502可以换个上游服务器 Tcp keepalive 一般都是由进程在 ...
HTC Vive 基础入门基于Unreal Engine 4引擎
主要以讲解介绍HTC Vive设备以及Unreal继承的Steam VR Plugin为主使用最新的虚幻引擎与Plugin完成VR环境的搭建然后完成一个基本的VR Games. 任务5: 04-配 ...
NMAP网络扫描工具的安装与使用
简介 NMAP是一款流行的网络扫描和嗅探工具也是一个强大的端口扫描类安全测评工具,被广泛应用在黑客领域做漏洞探测以及安全扫描,更多的nmap是一个好用的网络工具,在生产和开发中也经常用到,主要做端口开 ...
BZOJ2738 矩阵乘法（整体二分+树状数组）
单个询问二分答案即可,多组询问直接整体二分再二维BIT.注意保证复杂度. #include<iostream> #include<cstdio> #include<cma ...
Vue——轻松实现vue底部点击加载更多
前言需求总是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈一次请求页面使用slice来进行限制展现从0,a的数据 <div v-fo ...
洛谷P5069 [Ynoi2015]纵使日薄西山（树状数组，set）
洛谷题目传送门一血祭向dllxl致敬! 算是YNOI中比较清新的吧,毕竟代码只有1.25k. 首先我们对着题意模拟,寻找一些思路. 每次选了一个最大的数后,它和它周围两个数都要减一.这样无论如何, ...

深入理解之css中的border属性