深入理解之css中的border属性
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属性讲下我自己所积累的,与大家共享 ...
随机推荐
- LODOP暂存、应用、复原 按钮的区别
LODOP中打印设计(PRINT_DESIGN)有暂存和复原按钮,打印维护(PRINT_SETUP)有应用和复原按钮. 打印设计暂存和打印维护的应用功能不同,两者的区别:1.打印设计的暂存.复原(类似 ...
- Python学习之路——day05
今日内容:1.可变与不可变类型:可变类型:值可以改变,但是id不变,证明就是在改变原值,是可变类型不可变类型:值改变,但是id也跟着改变,证明是残生了新的值,是不可变类型 2.数字类型2.1整型:记录 ...
- Web API 配置Help Page
当你创建一个web API,它通常用于创建一个帮助页面,以便其他开发人员知道如何调用你的API.你可以手动创建所有的文档,但最好是autogenerate尽可能多. 简化这个任务,ASP.Web AP ...
- 牛客网-2018年全国多校算法寒假训练营练习比赛（第四场）-A
解题思路:二分图的最大匹配,但这题是所有点都遍历一遍,所以答案/2: 代码: #include<iostream> #include<algorithm> #include&l ...
- kubernetes增加污点，达到pod是否能在做节点运行
master node参与工作负载 (只在主节点执行)使用kubeadm初始化的集群,出于安全考虑Pod不会被调度到Master Node上,也就是说Master Node不参与工作负载. 这里搭建的 ...
- Codeforces Round #433 Div. 1
A:显然从大到小排序后贪心放在第一个能放的位置即可.并查集维护. #include<iostream> #include<cstdio> #include<cmath&g ...
- Quartus prime 16.0 in_system memory content editor 使用
前言 quartus提供了片内存储器的实时查看与修改,而不用编译工程,很棒.你可以方便的查看到存储器中到底存储了什么东西. 流程 1.打开: 2.主界面: 3.设置jtag项之后,查看即可. sign ...
- Python课程目录
Python基础1 介绍.基本语法.流程控制 Python基础2 列表.字典.集合 Python基础3 基础3-函数
- os x && linux 文件传输基础命令
一.从服务器下载文件到本机 1.修改文件所属 由于只能下载文件所属为自己的文件,所以要做修改文件所属的操作. chown hudelei /opt/logs/tomcat/app/tomcat_stk ...
- Shell 字符截取命令 awk
awk命令# awk '条件1{动作1} 条件2{动作2}….' 文件名一般使用关系表达式作为条件动作:1.格式化输出 2.流程控制语句 处理cut命令无法截取空格的列 例子:截取出磁盘使用率 df ...