• 技术文章 >web前端 >前端问答

    css3新增了哪三种边框效果

    青灯夜游青灯夜游2022-04-25 16:32:27原创456

    css3新增的三种边框效果:1、边框图片“border-image”,可为边框添加背景图片;2、边框圆角“border-radius”,可给边框添加一个或多个圆角效果;3、边框阴影“box-shadow”,可将一个或多个阴影添加到元素框上。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css3新增了三种边框效果

    属性说明CSS
    border-image设置所有边框图像的速记属性。3
    border-radius一个用于设置所有四个边框- *-半径属性的速记属性3
    box-shadow附加一个或多个下拉框的阴影3

    1、边框图片“border-image”

    border-image属可以为边框添加背景图片。现在所有主流浏览器最新版本都支持border-image属性。

    语法:

    说明:

    border-image属性需要定义3个方面的内容。

    (1)图片路径。

    (2)切割宽度:四条边的切割宽度,依次为上边、右边、下边、左边(顺时针)。

    (3)平铺方式:有3种取值,分别为repeat、round和stretch。

    在本节所有例子中,我们都是使用图所示的这张90px×90px的图片作为边框的背景图片。

    代码示例:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            div
            {
                width:210px;
                height:150px;
                border:30px solid gray;
                border-image:url(img/border.png) 30 repeat;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

    浏览器预览效果如下图所示。

    分析:

    从预览效果我们可以知道,位于4个角的数字1、3、7、9还是乖乖地位于4个角。然后4条边框的2、4、6、8会不断地平铺。

    对于border-image属性,我们总结如下:

    (1)在制作边框背景图片时,应该制作4条边,中间部分需要挖空。

    (2)边框背景图片每条边的宽度跟对应的边框宽度(即border-width)应该相同。

    2、边框圆角“border-radius”

    border-radius属性可以给边框添加圆角效果

    border-radius 属性定义元素角的半径,通过 CSS border-radius 属性,可以实现任何元素的“圆角”样式。

    语法:

    border-radius: none | length{1,4} [/ length{1,4}

    其中每一个值可以为 数值或百分比的形式。

    length/length 第一个lenght表示水平方向的半径,而第二个表示竖直方向的半径。

    如果是一个值,那么 top-left、top-right、bottom-right、bottom-left 四个值相等。

    如果是两个值,那么 top-left和bottom-right相等,为第一个值,top-right和bottom-left值相等,为第二个值。
    这里写图片描述
    如果是三个值,那么第一个值是设置top-left,而第二个值是 top-right 和 bottom-left 并且他们会相等,第三个值是设置 bottom-right。
    这里写图片描述
    如果是四个值,那么第一个值是设置 top-left, 而第二个值是 top-right 第三个值 bottom-right 第四个值是设置 bottom-left
    这里写图片描述

    除了上述的简写外,还可以和border一样,分别写四个角,如下:

    border-top-left-radius: //左上角 
    border-top-right-radius: //右上角 
    border-bottom-right-radius: //右下角 
    border-bottom-left-radius: //左下角

    分别是水平方向和竖直方向半径,第二值省略的情况下,水平方向和竖直方向的半径相等。
    border-radius 只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持 border-radius 标准语法格式,对于老版的浏览器,border-radius 需要根据不同的浏览器内核添加不同的前缀,比说 Mozilla 内核需要加上“-moz”,而 Webkit 内核需要加上“-webkit”等,但是IE和Opera没有私有格式,因此为了最大程度的兼容浏览器,我们需要设置如下:

    -webkit-border-radius: 10px 20px 30px; 
    -moz-border-radius: 10px 20px 30px; 
    border-radius: 10px 20px 30px;

    请将标准形式写在浏览器私有形式之后。

    示例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一,关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="刘艳">
    <title></title>
    <style>
    img {
    border-radius: 30px;
    margin: 100px;
    }
    </style>
    </head>
    <body>
    <img src="../images/photo.jpg" width="300px">
    </body>
    </html>

    1.png

    3、边框阴影“box-shadow”

    在css中,可使用box-shadow属性实现边框阴影效果,box-shadow属性可以设置一个或多个下拉阴影的框。

    语法

    box-shadow: h-shadow v-shadow blur spread color inset;

    可能的值:

    说明
    h-shadow必需的。水平阴影的位置。允许负值
    v-shadow必需的。垂直阴影的位置。允许负值
    blur可选。模糊距离
    spread可选。阴影的大小
    color可选。阴影的颜色。
    inset可选。从外层的阴影(开始时)改变阴影内侧阴影

    注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

    box-shadow属性的使用

    1、水平垂直偏移为0也可以有阴影

    如果offset-x或offset-y值为0,则阴影在元素背后,此时给blur-radius值或spread值可以产生阴影效果。

    例子:

    但是有一点要注意:扩展阴影必须和阴影模糊半径配合使用。

    我个人觉得应该是没有配合使用这一说,但不可能只设置扩展阴影,因为扩展阴影和阴影模糊的取值都可以为正。如果只有扩展阴影的话,会被浏览器当做模糊阴影来解析,所以也可以简单理解为“扩展阴影必须和阴影模糊半径配合使用”,如果只用扩展阴影,可以写成:box-shadow:0 0 0 1px;。

    <style type="text/css">
    div{
        width: 100px;
        height: 100px;
        margin:50px;
        border: 10px dotted pink;
        display: inline-block;
    }
    .blur{
            box-shadow: 0 0  20px ;
            /*box-shadow: 0 0  20px green;*/ /*也可以自定义颜色*/
    }  
    .spread-positive{
            box-shadow: 0 0 20px 5px ;
            /* box-shadow: 0 0 20px 5px green;*/ /*也可以自定义颜色*/
    }
    .spread-negative{
            box-shadow: 0 0 20px -5px ;
            /* box-shadow: 0 0 20px -5px green;*/ /*也可以自定义颜色*/
    }
    </style>
    <body>
    <div class="blur"></div>
    <div class="spread-positive"></div>
    <div class="spread-negative"></div>
    </body>

    2、设置水平垂直偏移得到阴影效果

    outset情况:水平垂直偏移为0,但是不设置blur和spread,看不到阴影,因为此时box-shadow的周长和border-box一样,所以可以通过设置偏移让阴影显示出来。

    inset情况:水平垂直偏移为0,不设置blur和spread,同样看不到阴影,因为此时box-shadow的周长和padding-box一样,同样可通过设置偏移让阴影显示出来。

    例子:

    <style type="text/css">
    div{
        width: 100px;
        height: 100px;
        margin:50px;
        border: 10px dotted pink;
        display: inline-block;
    }
    .shadow0{box-shadow: 0 0;}  
    .shadow1{box-shadow: 1px 1px;}
    .shadow10{box-shadow: 10px 10px;}
    .inset-shadow0{box-shadow: 0 0 inset;}  
    .inset-shadow1{box-shadow: 1px 1px inset;}
    .inset-shadow10{box-shadow: 10px 10px inset;}
    </style>
    <body>
        <div class="shadow0"></div>
        <div class="shadow1"></div>
        <div class="shadow10"></div>
        <div class="inset-shadow0"></div>
        <div class="inset-shadow1"></div>
        <div class="inset-shadow10"></div>
    </body>

    3、投影方式

    投影方式默认是outset,即外部投影,可设置inset让向内投影。

    例子:第一个div默认outset,第二个设置inset,第三个同时设置两个阴影可以更好的看到outset和inset的关系,第四个div可以看出inset阴影在背景之上,内容之下。

    <style type="text/css">
    div{
        width: 100px;
        height: 100px;
        margin:50px;
        border: 10px dotted pink;
        display: inline-block;
        vertical-align: top;
    } 
    .outset{
        box-shadow: 10px 10px teal;
    }
    .inset{
        box-shadow: 10px 10px teal inset;    
    }
    .double{
        box-shadow: 10px 10px teal inset,10px 10px teal;
    }
    .bg{
        background-color: yellow;
    }
    </style>
    <body>
        <div class="outset"></div>
        <div class="inset"></div>
        <div class="double"></div>
        <div class="inset bg">inset阴影在背景之上,内容之下</div>
    </body>

    4、如果元素同时指定border-radius属性,则阴影呈现相同的圆角。

    <style type="text/css">
     div{
     width: 100px;
        height: 100px;
        margin:50px;
        border: 10px dotted pink;
        display: inline-block;
        border-radius: 50px;
     }
    .shadow{
        box-shadow: 0 0  10px 10px green;
    }
    </style>
    <body>
    <div class="shadow"></div>
    </body>

    (学习视频分享:css视频教程web前端

    以上就是css3新增了哪三种边框效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:CSS3
    上一篇:es6怎么判断数组中是否包含对象 下一篇:es6怎么实现数组的遍历
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css3属性选择器的用法是什么• css3有图片缩小属性吗• css3中transition是什么意思• css3筛选怎么除去第一个元素的元素• css3线性渐变可以实现三角形吗• css3新增伪类选择器有哪些
    1/1

    PHP中文网