CSS border属性--妙用

最新推荐文章于 2022-11-13 12:50:26 发布

转载最新推荐文章于 2022-11-13 12:50:26 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000010160618

本文介绍了一系列在Internet Explorer低版本中使用CSS实现特殊效果的方法，包括圆角、图标hover变色、图片定位及三角形效果等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在ie下实现圆角效果

（由于border-radius兼容性特别差，所以要在ie低版本浏览器下实现圆周角效果特别难）
利用border-style的dotted效果可实现如下图所示的圆效果：图片描述

代码简单如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 150px;
            height: 150px;
            overflow: hidden;
        }

        .dotted {
            width: 100%;
            height: 100%;
            border: 149px dotted red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="dotted"></div>
    </div>
</body>

</html>

制作三杠icon效果

其实就是利用border-style double特性

hover变色

我们在做如下图标时，
图片描述

一般情况下hover时会有三处变色
图片描述
但是利用border-color继承自color这一特性hover时可以只改一处，如下简便的写

利用透明边框使得图片定位容器右侧变得容易

一般background-position是距离左上角定位的，比方说我想要距离上边50px 左边40px，可以

background-position: 50px 40px;

但是如果想要让图片距离距离下边40px 右边50px 怎么办呢？

            border-right: 50px solid transparent;
            background-position: 100% 40px;

上面代码就实现了这个功能，主要原因是background-position是不把border计算在内的，所以100%......

制作三角效果

从最简单的看起图片描述

利用边框增加点击区域响应范围

利用border点击后有响应，再配合box-shadow可增加响应区域大小
图片描述

实现两栏等高布局

        .box {
            border-left: 300px solid transparent;
        }
        .left {
            width: 300px;
            margin-left: -300px;
            float: left;
        }
        
    <div class="box">
        <div class="left">这里是左边栏内容</div>
        <div>
            不管我右边栏内容多高，两边都是等高的，而且没有任何浏览器兼容性问题</div>
    </div>

总结：
1）border-width不支持百分比，因为边框不会因为元素尺寸的变化而缩放，类似的outline、box-shadown、text-shadow......都是不支持百分比的
2）border-color、text-shadown、drop-shadown、outline等都是从color继承来的