css3 边框记

时间 2019-11-11

标签 css3 css 边框栏目 CSS 繁體版

原文原文链接

css3 边框

　　border属性在css1中就已经定义了，使用它能够设置元素的边框风格，边框颜色以及边框粗细。css

　　border-width:设置元素边框的粗细。
　　border-color:设置元素边框的颜色。
　　border-style:设置元素边框的类型。html

　　在实际运用中能够将上面3个属性合并起来，简写为：
　　border:border-width border-color border-style;css3

　　还能够为不一样的边设置不一样的样式，其规则遵循上右下左循序。浏览器

　　由于border-width与border-color有默认的样式，能够省略，可是border-style必定要写，不然不会显示边框样式,经常使用的有实线“solid”，虚线“dashed”，点状线“dotted”等。布局

border-color

　　border-color属性在css3加强了，它能够为元素边框设置更多的颜色。url

border-color:[<color> | transparent{1,4} | inherit

　　border-color的语法看上去和css1中的彻底相同，若是使用border-color这种缩写语法，将不会有任何效果，必须将这个border-color标准写法拆成四个边框，使用多种颜色才行。spa

border-top-colors:[<color> | transparent{1,4} | inherit
border-left-colors:[<color> | transparent{1,4} | inherit
border-bottom-colors:[<color> | transparent{1,4} | inherit
border-left-colors:[<color> | transparent{1,4} | inherit

　　注意：color是负数colors。
<!DOCTYPE html>3d

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>   
    div{
        width:100px;
        height:100px;
        border:10px solid;
        -moz-border-top-colors:red yellow blue green red yellow blue green red yellow;
        -moz-border-right-colors:red yellow blue green red yellow blue green red yellow;
        -moz-border-bottom-colors:red yellow blue green red yellow blue green red yellow;
        -moz-border-left-colors:red yellow blue green red yellow blue green red yellow;            
    }     
</style>
</head>
<body>
<div></div>
</body>
</html>

　　border-color属性的参数其实很简单，就是颜色值。当border-color只设置一个颜色值时，效果和css1中的border-color同样。只有设置了n个颜色值，而且边框宽度也为n像素，就可使用css3的border-color属性设置n个颜色，每种颜色显示1像素的宽度，若是宽度值大于颜色数量的值，最后一种颜色用于显示剩下的宽度。code

border-image

　　css3增添了一个图片边框(border-image)的属性，可以模拟出background-image属性的功能。cdn

border-image:none | <image> [<number> | <percentage>]{1,4} [/ <border-width>{1,4}]? [stretch | repeat | round]{0,2}

　　为了简单理解，俺们把上面属性分解为四个子属性(在实际中必须按照标准玩)。它们分别是：
　　引入背景图片：border-image-soure
　　切割引入背景图片：border-image-slice
　　边框背景图片的宽度：border-image-width
　　边框背景图片的排列方式：border-image-repeat

border-image-source

border-image-source:url(image url)

　　border-image-source跟background-image属性类似，也是经过url()来调用背景图片，图片的路径能够是相对地址，也能够是绝对地址，默认值是none。

border-image-slice

border-image-slice:[<number> | <percentage>]{1,4} && fill ?

　　border-image-slice是用来分解引入进来的背景图片。
　　取值支持像素与百分比，其中像素不须要添加单位，由于默认单位就是像素，百分比即相对于边框背景图片而言的，例如边框图片的大小是300px X 240px,取百分比为25%，30%，15%，20%，他们实际对应的效果就是剪切了(从外到里)图片的60px,90px,36px,60px四边的大小(遵循上右下左循序）。fill从字面上说就是填充的意思，若是使用这个关键词时，图片边界的中间部分将保留下来。默认状况为空。

border-image-width

border-image-width:[<length> | <percentage> | <number> | auto]{1,4}

　　用来设置边框背景图片的显示大小，理解为border-width来用。

border-image-repeat

border-image-repeat:[stretch | repeat | round]{1,2}

　　用来指定边框背景图片的排列方式，stretch拉伸，repeat重复，round平铺，其默认值为stretch。它最多只接受两个参数值，第一个值表示水平方向的排列方式，第二个值表示垂直方向的排列方式。当取一个值时，表示水平和垂直方向的排列方式相同。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>   
    div{
        width:200px;
        height:200px;
    /*剪切了图片四个方向各27px，并设置边框大小为27px，水平方向平铺，垂直方向拉伸*/    
        -moz-border-image:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2d_gVdFXXXXcLXXXXXXXXXXXX_!!2406102577.png) 27 27 27 27/27px round stretch;           
    }     
</style>
</head>
<body>
    <div></div>
</body>
</html>

border-radius

　　css3专门针对元素的圆角效果增长了一个圆角属性border-radius。

border-radius:none | <length> {1,4}[/<length>{1,4}] ?

　　border-radius是一种缩写方法。若是设置反斜杠符号“/”，则反斜杠前面的值是元素圆角的水平方向半径，后面的是垂直方向半径，若是省略，则水平与垂直半径同样。
　　none:默认值，表示元素没有圆角。
　　<length>:由浮点数字和单位标识符组成的长度值。不能够是负值。
　　注意:如要要重置元素没有圆角，取值none并没有效果，须要将值设为0。
　　border-radius能够将各个角单独拆分出来。

/*定义元素左上角圆角*/   
border-top-left-radius:<length>/<length>    
/*定义元素右上角圆角*/   
border-top-right-radius:<length>/<length> 
/*定义元素右下角圆角*/   
border-bottom-right-radius:<length>/<length> 
/*定义元素左下角圆角*/   
border-bottom-left-radius:<length>/<length>

　　
　　
圆

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>   
    div{
        width:100px;
        height:100px;    
        background:#808080;
        /*半径是宽度的一半*/
        border-radius:50%;              
    }     
</style>
</head>
<body>
<div></div>
</body>
</html>

半圆

div{
    width:100px;
    height:50px;    
    background:#808080;
    /*定义左上角与右上角的半径为宽度的一半*/
    border-radius:50px 50px 0 0;              
}

扇形

div{
    /*宽高半径同样，只设置一边*/
    width:100px;
    height:100px;    
    background:#808080;
    border-radius:100px 0 0 0;              
}

椭圆

div{
    width:100px;
    height:50px;    
    background:#808080;
    /*水平半径等于宽，垂直半径等于高*/
    border-radius:100px/50px;              
}

box-shadow

　　box-shadow也是css3新增的一个重要属性，用来定义元素的盒子阴影。

box-shadow:none | [<length> <length> <length>?<length>? || <color>] [,<length> <length> <length>?<length>? || <color>]+

　　能够简写为：

box-shadow:none | [inset x-offset y-offset blur-radius spread-radius color],[inset x-offset y-offset blur-radius spread-radius color]

　　box-shadow属性可使用一个或多个投影，中间用逗号“，”隔开。
　　none:默认值，元素没有任何阴影效果。
　　inset:阴影类型，可选值。若是不设置，默认的投影方式是外阴影，若是设置为inset，就是投影为内阴影。
　　x-offset:阴影水平偏移量，其值能够是正负值。若是取正值，则阴影在元素的右边；若是取负值，则阴影在元素的左边。
　　y-offset:阴影垂直偏移量，其值能够是正负值。若是取正值，则阴影在元素的下边；若是取负值，则阴影在元素的上边。
　　blur-radius:阴影模糊半径，可选参数。只能为正值，若是取值为0，表示阴影不具备模糊效果，值越大，阴影的边缘越模糊。
　　spread-radius:阴影扩展半径，可选参数。其值能够是正负值，若是取值为正值，则整个阴影都扩大，负值缩小。
　　color:阴影颜色，可选参数，若是不设定任何颜色，浏览器会取默认色。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>   
    div{
        width:100px;
        height:50px;    
        border:1px solid #808080;
        border-radius:10px;
        /*水平与垂直偏移量为正值，阴影在元素右边与下边，黑色*/
        box-shadow:2px 2px 0 0 black;              
    }     
</style>
</head>
<body>
    <div></div>
</body>
</html>

　　阴影太浓，咱们添加阴影模糊半径。

div{
    width:100px;
    height:50px;    
    border:1px solid #808080;
    border-radius:10px;
    box-shadow:2px 2px 5px 0 black;              
}

　　阴影模糊半径不仅模糊了阴影边缘，整个元素都笼罩在阴影模糊半径之下，咱们再添加阴影扩展半径，设置负值，使模糊半径缩小。

div{
    width:100px;
    height:50px;    
    border:1px solid #808080;
    border-radius:10px;
    box-shadow:2px 2px 5px -3px black;              
}

　　只设置模糊半径与颜色。

div{
    width:100px;
    height:50px;    
    border:1px solid #808080;
    border-radius:10px;
    box-shadow:0 0 10px 0 red;              
}

　　只设置扩展半径与颜色。

div{
    width:100px;
    height:50px;    
    border:1px solid #808080;
    border-radius:10px;
    box-shadow:0 0 0 3px red;              
}

　　扩展半径相似边框效果，但不一样的是，阴影并不在文档流中，因此不会改变布局。阴影能够设置多个，所以咱们能够借助阴影扩展半径制做相似多边框颜色的效果。

div{
    width:100px;
    height:50px;   
    border:1px solid #808080;
    border-radius:10px;
    box-shadow:0 0 0 3px red,
           0 0 0 6px yellow,        
               0 0 0 9px blue,  
           0 0 0 12px green;              
}

　　内阴影效果

div{
    width:100px;
    height:50px;   
    border:1px solid #808080;
    border-radius:10px;
    box-shadow:inset 2px 2px 2px 0 black;                      
}

　　内阴影的阴影方向与外阴影的阴影方向相反，内阴影水平偏移量取正值时在左边，负值时在右边，垂直偏移量取正值时在上边，负值时在下边。

　　多层阴影效果

div{
    width:100px;
    height:50px;   
    border:1px solid #808080;
    border-radius:10px;
    box-shadow:2px 2px 2px red,
           4px 4px 2px yellow,
           6px 6px 2px blue,        
           8px 8px 2px green;                      
}

　　css3边框完，然个中奥妙，却不止