css对边框的特性操纵和连接的伪类挑选器

日期:2021-03-16 类型:科技新闻 

关键词:开发一个小程序多少钱,凡科轻站小程序,微信群抽奖小程序,小程序登录页面,微信小程序 微店


原文:http://jorux.com/archives/property⑶-if-you-love-css/
本篇关键详细介绍css对边框(border)的特性操纵和连接(link)的伪类挑选器.
边框(border): css操纵的边框特性包含border-width, border-color, border-style.
Border之因此令人很疑惑关键源于IE5盘根错节的BUG, 因为IE5是1个“will soon be dead” 的访问器, 这里只列举1个最为著名的有关border-width的BUG, 让大伙儿更好的了解border的含意, 先看下图:

如上图所示, 目标A(白色矩形框)周边有蓝色边框B, 能够看出A的具体宽度为ef, 而IE5不这么觉得, 它把cd的长度界定为目标A的宽度, 这个bug在边框的宽度小时基本上发觉不到, 但在边框与目标宽度相差不大时显得尤其显著.
如今, 融合以上表明, 能够看出border是单独于目标以外, 坐落于maginpadding之间(后表明), 具备固定不动宽度, 色调和款式的地区.
1. border-width: 其可有实际标值(如1px, 2px等)或是叙述性(thin, medium, thick)的特性值. 因为访问器及本人设定的不一样致使thin, medium, thick这些特性值的主要表现不1, 不强烈推荐应用. css编码以下:
border-width: 1px;
border-width: 2px;
border-width: thin;
border-width: medium;
border-width: thick;

宽度实际效果以下(留意不一样访问器下的差别):
1px2pxthinmediumthick
2. border-style: 边框款式包含solid, dashed, dotted, double, groove, ridge, inset, outset等, 编码以下:
border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

款式实际效果以下(你将会必须Firefox或是Opera才可以看到后4种实际效果):
solid

dashed

dotted

double

groove

ridge

inset

outset
3. border-color: 边框色调特性和1般色调特性是1样的, 能够参看特性篇(1).
Summary: 以上列举的全是4边同样款式的状况, 实际上能够各自设定border-top, border-right, border-bottom, border-left4边的特性, 比如说要想主要表现1个宽2px, 蓝色(blue), 款式为solid的左右边框, 编码以下:
border-top-width: 2px;
border-top-color: blue;
border-top-style: solid;
border-bottom-width: 2px;
border-bottom-color: blue;
border-bottom-style: solid;

简写为:
border-top: blue 2px solid;
border-bottom: blue 2px solid;

主要表现以下:
宽2px,蓝色,款式为solid的边框
上1页12 下1页 阅读文章全文
上一篇:Opera下cloneNode的bug 返回下一篇:没有了