border详解

curried 发布于2019-08-29 12:28 / 2892人阅读

border属性指定了盒的border区的width，color和style。这些属性适用于所有元素

border-width与百分比

border-width不支持百分比:不符合语义,边框不会因设备大小而变化

border-width默认是medium:3px,因为border-style:double至少3px才有效果

了解各种border-style类型

border-style:dashed虚线,在chrome/firefox中,实点宽高3:1,实点虚点宽度比例1:1;在IE中,实点宽高2:1,实点虚点宽度比例2:1.

border-style:dotted点线,在chrome/firefox中,点线是小方块;在IE中,点线是小圆点.

border-style:double双线,计算规则是,双线宽度永远相等,中间间隔±1.

1px:0+1+0
2px:1+0+1
3px:1+1+1
4px:1+2+1
5px:2+1+2
6px:2+2+2
7px:2+3+2

使用双线实现三道杠效果

border-color与color

没有指定border-color的时候,color会作为默认的border-color

可以利用这个特性,来实现上传按钮变色功能,比以往的代码要减少很多

border与background-position定位

使用background-position定位

background-position定位只能相对于左上角,不能相对于右下角,为了实现右下角的定位,我们可以配合border使用,因为100%右侧定位不计算border区域

这里需要注意的是,div设置了宽高,background-image才起作用

border与三角等图形构建

利用border实现三角,梯形以及模拟圆角

当width和height都为0时,border如果果有一定宽度,可以实现由4个等边三角形组成的正方形,width和height变大后,会逐渐演变成4个梯形

利用这种特性,可以通过两个border和一个矩形模拟圆角矩形

此外还可以利用在下拉菜单,聊天框等有三角形状的地方

border与透明框

border-color:transparent始于IE7,兼容性很好,因此我们可以通过透明框做很多事情

比方说前面的图片右侧固定定位以及各种图形的实现

透明边框的使用案例

第一个例子是在checkbox中使用透明框扩大渲染区域

第二个例子是filter:drop-shadow(20px 0 #ff0000)配合透明框实现渲染区域扩大,图标变色

border在布局中的应用

使用border实现两栏等高布局

使用border的好处是因为margin和padding使用很大的负值实现,所以如果负值元素有锚点定位则会飞出去,而使用border则没有这种问题,缺点是不支持百分比宽度

GPU云服务器云服务器 border border属性 border_box border-collapse

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111918.html

border-sizing属性详解和应用

摘要：用于更改用于计算元素宽度和高度的默认的盒子模型。它有和三种取值。和属性包括内容，内边距和边框，但不包括外边距。所以，的解释很符合常理。使用建议使用建议根据项目中的使用经验和的建议，推荐将属性设置为。个人网站原文链接属性详解和应用 box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inheri...

Batkid 2019-04-23 13:30 评论0 收藏0
详解css3之border-image

摘要：属性用来指定边框所需素材的路径，语法可以参照。当图片碰到边界时，如果超过则被截断。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。如下图后续是属性所以存在兼容性问题，需要在属性前面设置等 border-image简介 css3中新增了一个属性border-image，这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-...

jackzou 2019-08-21 10:46 评论0 收藏0
【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

摘要：仅仅使用作为身体的布局，用的各种和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。有的同学说，用不是能画得更逼真而且更简单吗这点我也非常赞同，但我的理由还是，那就没意思了。这次写的详细一点，把各个部位都拆出来分析。收工欢迎大家吐槽仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。那就没意思了。有的同学说，用c...

Codeing_ls 2019-08-02 15:54 评论0 收藏0
【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

摘要：仅仅使用作为身体的布局，用的各种和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。有的同学说，用不是能画得更逼真而且更简单吗这点我也非常赞同，但我的理由还是，那就没意思了。这次写的详细一点，把各个部位都拆出来分析。收工欢迎大家吐槽仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。那就没意思了。有的同学说，用c...

mayaohua 2019-08-30 13:00 评论0 收藏0