zoukankan      html  css  js  c++  java

  • 小聊outline和border

     border与outline:

    border属性：

    border-width、border-style、border-color 其中border-style可以为none或hidden

    outline（轮廓）
    在元素边框边缘的外围绘制一条包围元素的线，包括outline-color、outline-style、outline-width三个子属性的设置，可缺省，无固定顺序。轮廓不占据页面空间，也不一定是矩形。
    除了IE以外的浏览器都直接支持outline。只有规定了!DOCUMENT之后的IE8以上版本的浏览器才支持outline。

    outline-style可为none（不含有hidden属性）

    总结：这两者的区别有:
    1.outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）
    2.outline有可能是非矩形的（火狐浏览器下）

    在FireFox浏览器中，就有和outline匹对的圆角夫妻outline-radius

     

    示例：

    使用outline实现下图效果

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>直角三角形（右下角）</title>
    <style type="text/css">
        .use-outline-offset{
            margin-left: auto;
            margin-right: auto;
            width: 200px;
            height: 200px;
            border:40px solid #000000;
            background-color:#cccccc;
            outline-width:40px;
            outline-style:dotted;
            outline-offset:-80px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="use-outline-offset"></div>
</body>
</html>
     效果图：

    box-shadow模拟outline的圆角效果

    outline-radius虽然没戏了，但是，我们可以使用其他属性，可以实现类似的效果，比方说，图形构建大神之一的box-shadow.

    我们平时使用box-shadow最多的是前面3个参数，水平/垂直偏移以及模糊大小，可能有一些小伙伴并不清楚其第4个可选参数值究竟有何用？box-shadow第4个参数值，名外扩展，可以把投影范围扩大，当然，扩大的区域是实色区域。我们就可以利用这一特性，模拟实现不影响元素占据尺寸的outline实色边框效果啦！

    实例先行，代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角</title>
    <style type="text/css">
        .outline-radius {
            margin: 200px auto;
            width: 400px;
            height: 300px;
            border-radius: 1px;
            box-shadow: 0 0 0 30px #cd0000;
        }
        .outline-radius>img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="outline-radius">
    <img src="img/mm1.jpg">
</div>
</body>
</html>
     效果图如下：

    下面简单解释下两行CSS代码的含义：

    1. border-radius: 1px表示圆角大小1像素。有同学可能奇怪了，怎么是1像素啊，截图圆角明明好几十像素，下面正好就解释了；
    2. box-shadow: 0 0 0 30px #cd0000出现了4个数值，分别是水平偏移0, 垂直偏移0，模糊0(纯色), 扩展大小30像素。我们可以想象成，光线直接从盒子的正上方照下来，因为没有偏移没有模糊，我们看不到任何阴影。实际上，盒子的阴影正好就是盒子的大小（外带1像素圆角），此时，扩展30像素，我们可以脑补一下，1像素圆角的阴影再扩展30像素。哟，不就是我们需要的效果嘛，不就是截图展示的效果嘛！

      知道border-radius 1像素的左右了吧，扩展30像素后，圆角就是30像素大小了。

    然而，虽然肉眼看不出来，上面的方法实际有瑕疵，因为图片不是纯正的直角，有1像素的圆角。如果你想实现完美的内方外圆的效果，可以套一层标签，外面的标签使用border-radius和box-shadow就可以了。

      

    结束语：

    　　周末总结了border和outline这两个属性的用法。

    参考文章：
  • 相关阅读:
    第七周总结
    第六周编程总结
    第五周编程总结
    选择加冒泡排序法与找鞍马之总结与感受
    上三角矩阵与数组中元素之和最大
    文件的读写
    打印沙漏
    第八周作业
    第七周作业
    第六周作业
  • 原文地址：https://www.cnblogs.com/pizitai/p/6441621.html
Copyright © 2011-2022 走看看